BST_bigScreen/src/views/OrderMannage/BusinessOrderlist/edit.vue

<template>
  <div>
    <Toptitle
      :title="type == 1 ? '新增订单' : type == 2 ? '编辑订单' : '订单详情'"
    >
      <Button @click="back" type="primary" ghost style="margin-right: 10px"
        >返回</Button
      >
      <Button
        @click="showForms = true"
        type="primary"
        v-show="type != 3"
        style="margin-right: 10px"
        >表单设置</Button
      >
      <Button
        type="primary"
        v-show="type != 3"
        @click="handleSubmit('infoOrder')"
        >保存</Button
      >
    </Toptitle>

    <div class="page-edit">
      <!-- 表单项 -->
      <Form
        ref="infoOrder"
        inline
        :label-width="100"
        :model="info"
        style="padding: 10px 0"
        :rules="infoRules"
      >
        <FormItem
          v-if="formSetTableData.filter((v) => v.key == 'order_no')[0].is_show"
          :label="formSetTableData.filter((v) => v.key == 'order_no')[0].title"
        >
          <Input
            disabled
            v-if="type != 3"
            v-model="info.order_no"
            class="auto-width"
            placeholder="自动生成"
          />
          <span v-else>{{ info.order_no }}</span>
        </FormItem>
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'residential_name')[0]
              .is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'residential_name')[0].title
          "
          prop="residential_name"
        >
          <Input
            v-model="info.residential_name"
            v-if="type != 3"
            class="auto-width"
            placeholder="请输入项目名称"
          />
          <span v-else>{{ info.residential_name }}</span>
        </FormItem>
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'warning_state')[0].is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'warning_state')[0].title
          "
          prop="warning_state"
        >
          <Select
            clearable
            class="auto-width"
            v-if="type != 3"
            v-model="info.warning_state"
          >
            <Option
              :label="_item.title"
              v-for="_item in warningList"
              :key="_item.id"
              :value="_item.id"
            ></Option>
          </Select>
          <span v-else>{{
            warningList.length > 0 && info.warning_state
              ? warningList.filter((item) => item.id == info.warning_state)[0]
                  .title
              : ""
          }}</span>
        </FormItem>
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'front_money')[0].is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'front_money')[0].title
          "
        >
          <Input
            v-model="info.front_money"
            class="auto-width"
            v-if="type != 3"
            placeholder="请输入项目定金"
          />
          <span v-else>{{ info.front_money }}</span>
        </FormItem>
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'start_time')[0].is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'start_time')[0].title
          "
        >
          <DatePicker
            :options="options"
            v-if="type != 3"
            v-model="info.start_time"
            type="date"
            placeholder="开始日期"
            class="auto-width"
          ></DatePicker>
          <span v-else>{{ info.start_time }}</span>
        </FormItem>
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'client_name')[0].is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'client_name')[0].title
          "
          prop="custom_id"
        >
          <Select
            clearable
            filterable
            v-if="type != 3"
            class="auto-width"
            @on-change="handleClientChange"
            v-model="info.custom_id"
          >
            <Option
              v-for="item in clientList"
              :label="item.title"
              :key="item.id"
              :value="item.id"
            ></Option>
          </Select>
          <span v-else>{{
            clientList.length > 0 && info.custom_id
              ? clientList.filter((item) => item.id == info.custom_id)[0].title
              : ""
          }}</span>
        </FormItem>
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'custom_detail_name')[0]
              .is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'custom_detail_name')[0]
              .title
          "
        >
          <Select
            placeholder="请选择负责人"
            v-if="type != 3"
            clearable
            filterable
            v-model="info.custom_detail_name"
            @on-change="handleClientChargeChange"
            class="auto-width"
          >
            <!-- @on-change="handleClientDetailChange" -->
            <Option
              v-for="item of clientDetailList_respon"
              :key="item.service_name"
              :label="item.service_name"
              :value="item.service_name"
            ></Option>
          </Select>
          <span v-else>{{ info.custom_detail_name }}</span>
        </FormItem>
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'custom_detail_mobile')[0]
              .is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'custom_detail_mobile')[0]
              .title
          "
        >
          <Select
            clearable
            filterable
            v-if="type != 3"
            class="auto-width"
            v-model="info.custom_detail_mobile"
          >
            <Option
              v-for="item in clientDetailList_mobile"
              :label="item.mobile"
              :key="item.id"
              :value="item.mobile"
            ></Option>
          </Select>
          <span v-else>{{ info.custom_detail_mobile }}</span>
        </FormItem>
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'custom_detail_id')[0]
              .is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'custom_detail_id')[0].title
          "
        >
          <Select
            clearable
            filterable
            v-if="type != 3"
            class="auto-width"
            @on-change="handleClientDetailChange"
            v-model="info.custom_detail_id"
          >
            <Option
              v-for="item in clientDetailList_address"
              :label="item.address"
              :key="item.id"
              :value="item.id"
            ></Option>
          </Select>
          <span v-else>{{ info.custom_detail_id }}</span>
        </FormItem>
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'service_id')[0].is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'service_id')[0].title
          "
        >
          <Select
            disabled
            v-if="type != 3"
            placeholder="自动带出"
            v-model="info.service_id"
            class="auto-width"
          >
            <Option
              v-for="item of users"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            ></Option>
          </Select>
          <span v-else>{{
            users.length > 0 && info.service_id
              ? users.filter((item) => item.id == info.service_id)[0].nickname
              : ""
          }}</span>
        </FormItem>
        <FormItem
          v-if="formSetTableData.filter((v) => v.key == 'end_time')[0].is_show"
          :label="formSetTableData.filter((v) => v.key == 'end_time')[0].title"
        >
          <DatePicker
            :options="options"
            v-if="type != 3"
            v-model="info.end_time"
            type="date"
            placeholder="交付日期"
            class="auto-width"
          ></DatePicker>
          <span v-else>{{ info.end_time }}</span>
        </FormItem>
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'predict_price')[0].is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'predict_price')[0].title
          "
        >
          <Input
            v-model="info.predict_price"
            v-if="type != 3"
            readonly
            class="auto-width"
            placeholder="自动生成"
          />
          <span v-else>{{ info.predict_price }}</span>
        </FormItem>
        <FormItem
          v-if="formSetTableData.filter((v) => v.key == 'fax_price')[0].is_show"
          :label="formSetTableData.filter((v) => v.key == 'fax_price')[0].title"
        >
          <Input
            v-model="info.fax_price"
            v-if="type != 3"
            readonly
            class="auto-width"
            placeholder="自动生成"
          />
          <span v-else>{{ info.fax_price }}</span>
        </FormItem>
        <FormItem
          v-if="
            formSetTableData.filter((v) => v.key == 'order_price')[0].is_show
          "
          :label="
            formSetTableData.filter((v) => v.key == 'order_price')[0].title
          "
        >
          <Input
            v-model="info.order_price"
            v-if="type != 3"
            @on-change="handleOrderPriceChange($event, info)"
            class="auto-width"
            placeholder="自动生成"
          />
          <span v-else>{{ info.order_price }}</span>
        </FormItem>
        <FormItem
          prop="box_id"
          v-if="formSetTableData.filter((v) => v.key == 'box_id')[0].is_show"
          :label="formSetTableData.filter((v) => v.key == 'box_id')[0].title"
        >
          <Select
            clearable
            filterable
            v-if="type != 3"
            v-model="info.box_id"
            class="auto-width"
          >
            <Option
              v-for="item of sub_material_list"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></Option>
          </Select>
          <span v-else>{{
            sub_material_list.length > 0 && info.box_id
              ? sub_material_list.filter((item) => item.id == info.box_id)[0]
                  .title
              : ""
          }}</span>
        </FormItem>
        <FormItem
          v-if="formSetTableData.filter((v) => v.key == 'remark')[0].is_show"
          :label="formSetTableData.filter((v) => v.key == 'remark')[0].title"
        >
          <Input
            v-model="info.remark"
            type="textarea"
            v-if="type != 3"
            class="auto-width"
            placeholder="请输入订单备注"
          />
          <span v-else>{{ info.remark }}</span>
        </FormItem>
        <FormItem label="上传附件:">
          <div class="product-img">
            <div class="product-add">
              <div class="items" v-for="(item, index) of info.img" :key="index">
                <img
                  @click="looks(item)"
                  :src="$store.state.ip + item"
                  alt=""
                />
                <Icon
                  v-if="type != 3"
                  size="20"
                  @click="delItems(index, info.img)"
                  class="delete-img"
                  type="ios-close-circle"
                />
              </div>
              <div class="add-items" v-if="type != 3">
                <div class="item">
                  <Icon size="50" type="ios-add" />
                </div>
                <span>支持jpg/png格式</span>
                <input
                  @change="changeIpt($event, info.img)"
                  type="file"
                  class="ipt"
                />
              </div>
            </div>
          </div>
          <!-- <Button type="primary"
                  style="margin-right:10px;"
                  ghost>上传附件</Button> -->
          <!-- <Upload style="display: inline"
                  name="your_file"
                  :show-upload-list="false"
                  :headers="headers"
                  multiple
                  :data="uploadData"
                  :on-error="uploadError"
                  :on-progress="onProgress"
                  :on-success="uploadSuccess"
                  :action="$store.state.ip + '/api/deep_img_import'">
            <Button type="primary"
                    style="margin-right: 10px">上传附件</Button>
          </Upload> -->
        </FormItem>
        <div label="线条:" style="margin-left:20px;width:95%">
          <div style="font-size:20px">
            <span>线条:</span>
            <span v-if="wood_title_count.length < 1">无</span>
            <span
              v-else
              v-for="(item, index) in wood_title_count"
              :key="item.title + index"
              >{{ item.title }}:
              <span v-for="(_item, _index) in item.measure_str" :key="_item.id"
                >{{ _item.measure }}={{ _item.num }}{{ item.unit }}
                <span v-show="_index < item.measure_str.length - 1">；</span>
              </span>
              <span v-show="index < wood_title_count.length - 1">；</span>
            </span>
          </div>
        </div>
        <div label="合计:" style="margin-left:20px;width:95%">
          <div style="font-size:20px">
            <span>合计:</span>
            <span v-if="parts_title_count.length < 1">无</span>
            <span
              v-else
              v-for="(item, index) in parts_title_count"
              :key="item.title + index"
              v-show="item.title.indexOf('线条') == -1"
              >{{ item.title }}:{{ item.num }}{{ item.unit }}
              <span v-show="index < parts_title_count.length - 1">；</span>
            </span>
          </div>
        </div>
      </Form>
      <!-- 户型选择 -->
      <div class="content">
        <vxe-toolbar>
          <template #buttons>
            <div class="content_header">
              <h2>产品信息</h2>
              <div>
                <Button
                  type="primary"
                  style="margin-right: 10px"
                  v-show="!tree_btn_show"
                  @click="
                    $refs.xTree.setAllTreeExpand(true);
                    tree_btn_show = !tree_btn_show;
                  "
                  >全部展开</Button
                >
                <Button
                  type="primary"
                  style="margin-right: 10px"
                  v-show="tree_btn_show"
                  @click="
                    $refs.xTree.clearTreeExpand();
                    tree_btn_show = !tree_btn_show;
                  "
                  >全部收缩</Button
                >
                <Button
                  type="primary"
                  style="margin-right: 10px"
                  v-show="type == 3"
                  @click="handleShowMaterial"
                  >{{ is_material_show ? "收起" : "查看" }}原材料</Button
                >
                <Button
                  type="primary"
                  style="margin-right: 10px"
                  v-show="type != 3"
                  @click="handleSet({}, null, 1)"
                  >新增产品</Button
                >
              </div>
            </div>
          </template>
        </vxe-toolbar>
        <vxe-table
          resizable
          border
          ref="xTree"
          :tree-config="{ children: 'part' }"
          :data="tableData"
        >
          <vxe-table-column
            field="title"
            title="产品名称"
            align="center"
            min-width="120"
            tree-node
          ></vxe-table-column>
          <vxe-table-column
            field="position"
            title="位置"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="unit"
            title="计量单位"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="process_str"
            title="工艺属性"
            align="center"
            min-width="200"
          ></vxe-table-column>
          <vxe-table-column
            field="measurement_no_letter"
            title="尺寸"
            align="center"
            min-width="180"
          ></vxe-table-column>
          <vxe-table-column
            field="total_num"
            title="数量"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="num"
            title="核算数量"
            align="center"
            min-width="80"
          >
            <template #default="{ row }">
              {{ row.is_metal ? "" : row.num }}
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="unit_price"
            title="单价"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="ext_price"
            title="附加金额"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="over_price"
            title="超标金额"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="price"
            title="金额"
            align="center"
            min-width="80"
          >
            <template #default="{ row }">
              {{ row.is_metal ? "" : row.price }}
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="url_number"
            title="图号"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="remark"
            title="备注"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="extra"
            title="附加项"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field="date"
            title="其他项"
            align="center"
            min-width="80"
          ></vxe-table-column>
          <vxe-table-column
            field=""
            title="操作"
            align="center"
            min-width="180"
          >
            <template #default="{ row, rowIndex }">
              <a
                @click="handleSet(row, rowIndex, 5)"
                v-show="type == 3 && rowIndex >= 0"
                style="margin: 0 5px"
                >详情</a
              >
              <a
                @click="handleSet(row, rowIndex, 4)"
                v-if="type != 3"
                v-show="rowIndex >= 0"
                style="margin: 0 5px"
                >复制</a
              >
              <a
                @click="handleSet(row, rowIndex, 2)"
                v-if="type != 3"
                v-show="rowIndex >= 0"
                style="margin: 0 5px"
                >编辑</a
              >

              <a
                @click="handleSet(row, rowIndex, 3)"
                v-if="type != 3"
                v-show="rowIndex >= 0"
                style="margin: 0 5px"
                >删除</a
              >
            </template>
          </vxe-table-column>
        </vxe-table>
        <!-- 原材料 -->
        <!-- v-show="type==3" -->
        <div class="original-part" v-show="type == 3 && is_material_show">
          <Table
            border
            show-summary
            :summary-method="handleSummary"
            :span-method="handleSpan"
            :columns="originalTableColumns"
            :data="originalData"
          ></Table>
        </div>
      </div>
    </div>
    <!-- 选择产品弹层--新增框 -->
    <Modal
      :width="1400"
      class-name="vertical-center-modal"
      title="新增产品"
      :mask-closable="false"
      v-model="showAddProduct"
      @on-visible-change="modalVisibleChange"
    >
      <div style="max-height: 800px; overflow: hidden; overflow-y: auto">
        <Tabs v-model="currentTabIndex" ref="tabsRef">
          <Button
            @click="handleProductCopy"
            size="small"
            type="primary"
            style="margin-right: 5px"
            slot="extra"
            >复制产品</Button
          >
          <Button
            @click="handleTabsAdd"
            size="small"
            type="warning"
            style="margin-right: 5px"
            slot="extra"
            >添加</Button
          >
          <Button
            @click="handleProductDele"
            size="small"
            type="primary"
            slot="extra"
            >删除</Button
          >
          <TabPane
            :label="
              (item.position ? item.position : '位置') + '-' + item.type_name
            "
            v-for="(item, index) in modalArray"
            :key="item.id"
            :name="item.index + ''"
          >
            <div class="modal_product_info">
              <div class="modal_product_info_title">产品信息</div>
              <div class="modal_product_info_content modal_product">
                <Form :model="item" :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 == item.product_id"
                          >{{ _item.title }}</span
                        >
                      </span>
                      <Select
                        filterable
                        clearable
                        filter-by-label
                        transfer
                        label-in-value
                        size="small"
                        v-model="item.product_id"
                        @on-change="changeAddProduct($event, index)"
                        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">
                        {{ item.position }}
                      </span>
                      <Input
                        size="small"
                        v-model="item.position"
                        style="width: 120px"
                        placeholder="请输入位置"
                      />
                    </Tooltip>
                  </FormItem>
                  <FormItem label="计量单位:">
                    <Input
                      size="small"
                      disabled
                      style="width: 120px"
                      v-model="item.unit"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <!-- 工艺属性 -->
                  <FormItem
                    v-for="(ele, idx) in item.process"
                    :key="ele.key + '' + item.id"
                    :label="ele.title + ':'"
                  >
                    <Tooltip style="width: 120px" transfer>
                      <span slot="content">
                        <span
                          v-for="_item in ele.processList"
                          :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, item, ele)
                        "
                        @on-change="
                          (e) => handleProductProcessChange(e, idx, item, ele)
                        "
                        v-model="ele.value"
                        size="small"
                      >
                        <Option
                          v-for="option of ele.processList"
                          :key="option.id"
                          :disabled="option.isDisabled"
                          :label="option.title"
                          :value="option.id"
                        ></Option>
                      </Select>
                    </Tooltip>
                  </FormItem>
                  <!-- 测量字段 -->
                  <FormItem
                    v-for="ele in item.measure"
                    :key="ele.id"
                    :label="ele.title + ':'"
                  >
                    <Input
                      size="small"
                      type="text"
                      clearable
                      :placeholder="ele.e_title"
                      v-model="ele.value"
                      @on-change="
                        (e) => handleProductMeasureChange(e, item, ele)
                      "
                      @on-blur="(e) => handleProductMeasureBlur(e, item, ele)"
                      style="width: 120px"
                    />
                  </FormItem>
                  <FormItem label="数量:">
                    <Input
                      size="small"
                      @on-change="(e) => handleProductNumChange(e, item)"
                      v-model="item.total_num"
                      style="width: 120px"
                      placeholder="请输入产品数量"
                    />
                  </FormItem>
                  <FormItem label="核算数量:">
                    <Input
                      size="small"
                      v-model="item.num"
                      disabled
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem label="单价:">
                    <Input
                      size="small"
                      v-model="item.unit_price"
                      @on-change="(e) => handleProductUnit_priceChange(e, item)"
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem label="附加金额:">
                    <Input
                      size="small"
                      v-model="item.ext_price"
                      @on-change="(e) => handleProductExt_priceChange(e, item)"
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem label="超标金额:">
                    <Input
                      size="small"
                      @on-change="(e) => handleProductOver_priceChange(e, item)"
                      v-model="item.over_price"
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem label="金额:">
                    <Input
                      size="small"
                      v-model="item.price"
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem label="图号:">
                    <Input
                      size="small"
                      v-model="item.url_number"
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem
                    v-for="(_customize, customize_key) in item.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 item.outh"
                    :label="outh.title"
                    :key="outh_key + 21"
                  >
                    <img
                      v-if="outh.key == 'img' || outh.key == 'url'"
                      @click="showPreview(item, 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, item, index)"
                      size="small"
                      clearable
                      style="width: 120px"
                      v-if="outh.key == 'lock'"
                      v-model="item[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="item.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 item.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 item.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,
                          item.measure,
                          item.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.procedure_property"
                          >{{ _item.title }}</span
                        >
                      </span>
                      <Select
                        style="width: 120px"
                        filterable
                        clearable
                        transfer
                        label-in-value
                        @on-change="
                          (e) => handlePartProcessChange(e, idx, element)
                        "
                        v-model="process_detail.procedure_property"
                        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, item.part)"
                      type="primary"
                      v-if="element.isBP"
                      style="margin-right: 5px"
                      size="small"
                      >拆分</Button
                    >
                    <Button
                      @click="handlePartsDele(element, idx, item.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">
                              <!-- <Tooltip
                                :content="
                                  ele.title || ele.part_detail_title || '请选择'
                                "
                              > -->
                              {{ ele.title || ele.part_detail_title }}
                              <!-- </Tooltip> -->
                            </div>
                          </FormItem>
                          <!-- <FormItem label="厚" :label-width="40">
                            <Input
                              size="small"
                              v-model="ele.long"
                              style="width: 80px"
                              placeholder="请输入厚"
                            />
                          </FormItem> -->
                          <!-- <FormItem label="宽" :label-width="40">
                            <Input
                              size="small"
                              v-model="ele.wide"
                              style="width: 80px"
                              placeholder="请输入宽"
                            />
                          </FormItem> -->
                          <!-- <FormItem label="高" :label-width="40">
                            <Input
                              size="small"
                              v-model="ele.high"
                              style="width: 80px"
                              placeholder="请输入高"
                            />
                          </FormItem> -->
                          <!-- <FormItem label="数量" :label-width="40">
                            <Input
                              size="small"
                              v-model="ele.num"
                              @on-change="(e) => handleSubpartNumChange(e, ele)"
                              style="width: 80px"
                              placeholder="请输入数量"
                            />
                          </FormItem> -->
                          <!-- 原材料 -->
                          <Form>
                            <FormItem>
                              <div style="width: 200px">
                                <!-- <Tooltip
                                  :content="
                                    ele.material_detail_title || '请选择'
                                  "
                                > -->
                                {{ ele.material_detail_title || "请选择" }}
                                <!-- </Tooltip> -->
                              </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(item.metalArray, 1)"
                  type="primary"
                  style="margin-right: 5px"
                  size="small"
                  >新增五金</Button
                >
                <Button
                  @click="handleExtraAdd(item.extArray, 2)"
                  type="primary"
                  size="small"
                  >新增附加项目</Button
                >
              </div>
              <div class="modal_product_info_content modal_extra">
                <Form
                  :model="element"
                  v-for="(element, idx) in item.metalArray"
                  :key="element.id"
                  :label-width="80"
                >
                  <FormItem label="五金:">
                    <Select
                      filterable
                      clearable
                      transfer
                      label-in-value
                      size="small"
                      @on-change="
                        (e) =>
                          handleMetalChange(e, element, idx, item.metalArray)
                      "
                      v-model="element.material_id"
                      style="width: 100px"
                    >
                      <Option
                        v-for="item of metalList"
                        :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, item)"
                      style="width: 100px"
                      placeholder="请输入数量"
                    />
                  </FormItem>
                  <FormItem label="单价:">
                    <Input
                      size="small"
                      v-model="element.price"
                      @on-change="handleTotalPriceCalc(element, item)"
                      style="width: 100px"
                      placeholder="请输入单价"
                    />
                  </FormItem>
                  <FormItem label="金额:">
                    <Input
                      size="small"
                      @on-change="handleTotalPriceChange(element, item)"
                      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(item.metalArray, element, idx, item)
                      "
                      >删除</a
                    >
                  </FormItem>
                </Form>
                <Form
                  :model="element"
                  v-for="(element, idx) in item.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, item)"
                      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, item)"
                      style="width: 100px"
                      placeholder="请输入数量"
                    />
                  </FormItem>
                  <FormItem label="单价:">
                    <Input
                      size="small"
                      v-model="element.price"
                      @on-change="handleTotalPriceCalc(element, item)"
                      style="width: 100px"
                      placeholder="请输入单价"
                    />
                  </FormItem>
                  <FormItem label="金额:">
                    <Input
                      size="small"
                      @on-change="handleTotalPriceChange(element, item)"
                      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(item.extArray, element, idx, item)
                      "
                      >删除</a
                    >
                  </FormItem>
                </Form>
              </div>
            </div>
          </TabPane>
        </Tabs>
      </div>
      <div slot="footer">
        <Button @click="cancelModal">取消</Button>
        <Button @click="handleAddProductSubmit" type="primary">确定</Button>
      </div>
    </Modal>
    <!-- 选择产品弹层--编辑框 -->
    <Modal
      :width="1400"
      class-name="vertical-center-modal"
      :title="title_state == 2 ? '编辑产品' : '查看产品'"
      :mask-closable="false"
      v-model="showEditProduct"
      @on-visible-change="modalVisibleChange"
    >
      <div style="max-height: 800px; overflow: hidden; overflow-y: auto">
        <Tabs value="name">
          <TabPane
            :label="
              (modalData.position ? modalData.position : '位置') +
                '-' +
                modalData.type_name
            "
            name="name"
          >
            <div class="modal_product_info">
              <div class="modal_product_info_title">产品信息</div>
              <div class="modal_product_info_content modal_product">
                <Form :model="modalData" :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 == modalData.product_id"
                          >{{ _item.title }}</span
                        >
                      </span>
                      <Select
                        filterable
                        clearable
                        transfer
                        filter-by-label
                        label-in-value
                        :disabled="isCheck"
                        size="small"
                        v-model="modalData.product_id"
                        @on-change="changeEditProduct($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">
                        {{ modalData.position }}
                      </span>
                      <Input
                        size="small"
                        v-model="modalData.position"
                        :disabled="isCheck"
                        @on-change="
                          (e) => handleProductPositionChange(modalData, e)
                        "
                        style="width: 120px"
                        placeholder="请输入位置"
                      />
                    </Tooltip>
                  </FormItem>
                  <FormItem label="计量单位:">
                    <Input
                      size="small"
                      disabled
                      style="width: 120px"
                      v-model="modalData.unit"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <!-- 工艺属性 -->
                  <FormItem
                    v-for="(ele, idx) in modalData.process"
                    :key="idx + '333' + modalData.id"
                    :label="ele.title + ':'"
                  >
                    <Tooltip style="width: 120px" transfer>
                      <span slot="content">
                        <span
                          v-for="_item in ele.processList"
                          :key="_item.id"
                          v-show="_item.id == ele.value"
                          >{{ _item.title }}</span
                        >
                      </span>
                      <Select
                        style="width: 120px"
                        filterable
                        clearable
                        transfer
                        label-in-value
                        :disabled="isCheck"
                        @on-open-change="
                          (e) => handleGetProductMeasure(e, idx, modalData, ele)
                        "
                        @on-change="
                          (e) =>
                            handleProductProcessChange(e, idx, modalData, ele)
                        "
                        v-model="ele.value"
                        size="small"
                      >
                        <Option
                          v-for="option of ele.processList"
                          :key="option.id"
                          :disabled="option.isDisabled"
                          :label="option.title"
                          :value="option.id"
                        ></Option>
                      </Select>
                    </Tooltip>
                  </FormItem>
                  <!-- 测量字段 -->
                  <FormItem
                    v-for="ele in modalData.measure"
                    :key="ele.id"
                    :label="ele.title + ':'"
                  >
                    <Input
                      size="small"
                      type="text"
                      clearable
                      :disabled="isCheck"
                      :placeholder="ele.e_title"
                      v-model="ele.value"
                      @on-change="
                        (e) => handleProductMeasureChange(e, modalData, ele)
                      "
                      @on-blur="
                        (e) => handleProductMeasureBlur(e, modalData, ele)
                      "
                      style="width: 120px"
                    />
                  </FormItem>
                  <FormItem label="数量:">
                    <Input
                      size="small"
                      @on-change="(e) => handleProductNumChange(e, modalData)"
                      v-model="modalData.total_num"
                      :disabled="isCheck"
                      style="width: 120px"
                      placeholder="请输入产品数量"
                    />
                  </FormItem>
                  <FormItem label="核算数量:">
                    <Input
                      size="small"
                      v-model="modalData.num"
                      disabled
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem label="单价:">
                    <Input
                      size="small"
                      :disabled="isCheck"
                      v-model="modalData.unit_price"
                      @on-change="
                        (e) => handleProductUnit_priceChange(e, modalData)
                      "
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem label="附加金额:">
                    <Input
                      size="small"
                      :disabled="isCheck"
                      v-model="modalData.ext_price"
                      @on-change="
                        (e) => handleProductExt_priceChange(e, modalData)
                      "
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem label="超标金额:">
                    <Input
                      :disabled="isCheck"
                      size="small"
                      @on-change="
                        (e) => handleProductOver_priceChange(e, modalData)
                      "
                      v-model="modalData.over_price"
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem label="金额:">
                    <Input
                      :disabled="isCheck"
                      size="small"
                      v-model="modalData.price"
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem label="图号:">
                    <Input
                      size="small"
                      :disabled="isCheck"
                      v-model="modalData.url_number"
                      style="width: 120px"
                      placeholder="自动带出"
                    />
                  </FormItem>
                  <FormItem
                    v-for="(_customize, customize_key) in modalData.customize"
                    :label="_customize.style + ':'"
                    :key="customize_key + 99"
                  >
                    <Input
                      v-show="_customize.type == 1"
                      :disabled="isCheck"
                      size="small"
                      type="text"
                      v-model="_customize.value"
                      style="width: 120px"
                      placeholder="请输入"
                    />

                    <Select
                      v-show="_customize.type == 2"
                      style="width: 120px"
                      :disabled="isCheck"
                      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 modalData.outh"
                    :label="outh.title"
                    :key="outh_key + 21"
                  >
                    <img
                      v-if="outh.key == 'img' || outh.key == 'url'"
                      @click="showPreview(modalData, 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, modalData, index)"
                      size="small"
                      clearable
                      style="width: 120px"
                      v-if="outh.key == 'lock'"
                      v-model="modalData[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
                      :disabled="isCheck"
                      style="width: 120px"
                      allow-create
                      @on-create="handleRemarkCreate"
                      v-model="modalData.remark"
                    >
                      <Option
                        v-for="_remark of support_remark"
                        :key="_remark"
                        :value="_remark"
                        :label="_remark"
                      ></Option>
                    </Select>
                    <!-- <Input
                      size="small"
                      type="textarea"
                      :disabled="isCheck"
                      v-model="modalData.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 modalData.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 modalData.part"
                  :key="element.id + '444' + idx"
                  :label-width="50"
                >
                  <FormItem
                    :label-width="element.isBP ? 1 : 50"
                    v-show="!element.is_metal"
                  >
                    <Radio
                      v-show="element.isBP"
                      :disabled="isCheck"
                      @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 ? false : true"
                  >
                    <Select
                      filterable
                      clearable
                      transfer
                      :disabled="isCheck"
                      label-in-value
                      size="small"
                      @on-change="
                        handlePartChange(
                          $event,
                          element,
                          modalData.measure,
                          modalData.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
                      :disabled="isCheck"
                      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
                      :disabled="isCheck"
                      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
                      :disabled="isCheck"
                      v-model="element.high"
                      style="width: 50px"
                      placeholder="请输入高"
                    />
                  </FormItem>
                  <FormItem
                    v-for="(process_detail, idx) in element.process"
                    :key="idx + '555' + element.part_id"
                    :label="process_detail.name + ':'"
                    v-show="
                      !element.is_metal &&
                        element.hide_process &&
                        !element.hide_process.filter(
                          (v) => process_all_list[v] == process_detail.name
                        ).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.procedure_property"
                          >{{ _item.title }}</span
                        >
                      </span>
                      <Select
                        style="width: 120px"
                        filterable
                        clearable
                        transfer
                        label-in-value
                        :disabled="isCheck"
                        @on-change="
                          (e) => handlePartProcessChange(e, idx, element)
                        "
                        v-model="process_detail.procedure_property"
                        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, modalData.part)"
                      type="primary"
                      v-show="!isCheck"
                      v-if="element.isBP"
                      style="margin-right: 5px"
                      size="small"
                      >拆分</Button
                    >
                    <Button
                      @click="handlePartsDele(element, idx, modalData.part)"
                      type="primary"
                      v-else
                      v-show="!isCheck"
                      style="margin-right: 5px"
                      size="small"
                      >删除</Button
                    >
                    <Button
                      @click="handlePartDetailEdit(element, idx)"
                      type="primary"
                      style="margin-right: 5px"
                      size="small"
                      >{{
                        element.isShowPartDetail
                          ? "收起"
                          : isCheck
                          ? "查看"
                          : "修改原材料"
                      }}</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">
                              <!-- <Tooltip
                                :content="
                                  ele.title || ele.part_detail_title || '请选择'
                                "
                              > -->
                              {{ ele.title || ele.part_detail_title }}
                              <!-- </Tooltip> -->
                            </div>
                          </FormItem>
                          <!-- <FormItem label="厚" :label-width="40">
                            <Input
                              size="small"
                              v-model="ele.long"
                              style="width: 80px"
                              placeholder="请输入厚"
                            />
                          </FormItem> -->
                          <!-- <FormItem label="宽" :label-width="40">
                            <Input
                              size="small"
                              v-model="ele.wide"
                              style="width: 80px"
                              placeholder="请输入宽"
                            />
                          </FormItem> -->
                          <!-- <FormItem label="高" :label-width="40">
                            <Input
                              size="small"
                              v-model="ele.high"
                              style="width: 80px"
                              placeholder="请输入高"
                            />
                          </FormItem> -->
                          <!-- <FormItem label="数量" :label-width="40">
                            <Input
                              size="small"
                              v-model="ele.num"
                              @on-change="(e) => handleSubpartNumChange(e, ele)"
                              style="width: 80px"
                              placeholder="请输入数量"
                            />
                          </FormItem> -->
                          <!-- 原材料 -->
                          <Form>
                            <FormItem>
                              <div style="width: 200px">
                                <!-- <Tooltip
                                  :content="
                                    ele.material_detail_title || '请选择'
                                  "
                                > -->
                                {{ ele.material_detail_title || "请选择" }}
                                <!-- </Tooltip> -->
                              </div>
                            </FormItem>
                            <FormItem label="高" :label-width="40">
                              <Select
                                style="width: 80px"
                                filterable
                                clearable
                                transfer
                                :disabled="isCheck"
                                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
                                :disabled="isCheck"
                                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
                                :disabled="isCheck"
                                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"
                                :disabled="isCheck"
                                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(modalData.metalArray, 1)"
                  type="primary"
                  style="margin-right: 5px"
                  v-show="!isCheck"
                  size="small"
                  >新增五金</Button
                >
                <Button
                  @click="handleExtraAdd(modalData.extArray, 2)"
                  type="primary"
                  v-show="!isCheck"
                  size="small"
                  >新增附加项目</Button
                >
              </div>
              <div class="modal_product_info_content modal_extra">
                <Form
                  :model="element"
                  v-for="(element, idx) in modalData.metalArray"
                  :key="element.id"
                  :label-width="80"
                >
                  <FormItem label="五金:">
                    <Select
                      filterable
                      clearable
                      transfer
                      label-in-value
                      size="small"
                      :disabled="isCheck"
                      @on-change="
                        (e) =>
                          handleMetalChange(
                            e,
                            element,
                            idx,
                            modalData.metalArray
                          )
                      "
                      v-model="element.material_id"
                      style="width: 100px"
                    >
                      <Option
                        v-for="item of metalList"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                      ></Option>
                    </Select>
                  </FormItem>
                  <FormItem label="数量:">
                    <Input
                      size="small"
                      :disabled="isCheck"
                      v-model="element.num"
                      @on-change="handleTotalPriceCalc(element, modalData)"
                      style="width: 100px"
                      placeholder="请输入数量"
                    />
                  </FormItem>
                  <FormItem label="单价:">
                    <Input
                      size="small"
                      :disabled="isCheck"
                      v-model="element.price"
                      @on-change="handleTotalPriceCalc(element, modalData)"
                      style="width: 100px"
                      placeholder="请输入单价"
                    />
                  </FormItem>
                  <FormItem label="金额:">
                    <Input
                      size="small"
                      :disabled="isCheck"
                      v-model="element.total_price"
                      @on-change="handleTotalPriceChange(element, modalData)"
                      style="width: 100px"
                      placeholder="请输入金额"
                    />
                  </FormItem>
                  <FormItem label="备注:">
                    <Input
                      size="small"
                      :disabled="isCheck"
                      v-model="element.remark"
                      style="width: 100px"
                      placeholder="请输入备注"
                    />
                  </FormItem>
                  <FormItem>
                    <a
                      style="color: red"
                      v-show="!isCheck"
                      @click="
                        handleExtraDele(
                          modalData.metalArray,
                          element,
                          idx,
                          modalData
                        )
                      "
                      >删除</a
                    >
                  </FormItem>
                </Form>
                <Form
                  :model="element"
                  v-for="(element, idx) in modalData.extArray"
                  :key="element.id"
                  :label-width="80"
                >
                  <FormItem label="附加项目:">
                    <Select
                      filterable
                      clearable
                      transfer
                      label-in-value
                      :disabled="isCheck"
                      size="small"
                      v-model="element.id"
                      @on-change="(e) => handleExtChange(element, e, modalData)"
                      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"
                      :disabled="isCheck"
                      v-model="element.num"
                      @on-change="handleTotalPriceCalc(element, modalData)"
                      style="width: 100px"
                      placeholder="请输入数量"
                    />
                  </FormItem>
                  <FormItem label="单价:">
                    <Input
                      size="small"
                      :disabled="isCheck"
                      v-model="element.price"
                      @on-change="handleTotalPriceCalc(element, modalData)"
                      style="width: 100px"
                      placeholder="请输入单价"
                    />
                  </FormItem>
                  <FormItem label="金额:">
                    <Input
                      size="small"
                      :disabled="isCheck"
                      v-model="element.total_price"
                      @on-change="handleTotalPriceChange(element, modalData)"
                      style="width: 100px"
                      placeholder="请输入金额"
                    />
                  </FormItem>
                  <FormItem label="备注:">
                    <Input
                      size="small"
                      :disabled="isCheck"
                      v-model="element.remark"
                      style="width: 100px"
                      placeholder="请输入备注"
                    />
                  </FormItem>
                  <FormItem>
                    <a
                      v-show="!isCheck"
                      style="color: red"
                      @click="
                        handleExtraDele(
                          modalData.extArray,
                          element,
                          idx,
                          modalData
                        )
                      "
                      >删除</a
                    >
                  </FormItem>
                </Form>
              </div>
            </div>
          </TabPane>
        </Tabs>
      </div>
      <div slot="footer">
        <Button @click="cancelModal">取消</Button>
        <Button
          @click="handleEditProductSubmit"
          v-show="!isCheck"
          type="primary"
          >确定</Button
        >
      </div>
    </Modal>
    <Modal
      v-model="showForms"
      @on-ok="postForms(1)"
      class-name="vertical-center-modal"
      style="max-height: 700px; overflow: hidden; overflow-y: auto"
      title="表单设置"
    >
      <Table
        :max-height="600"
        border
        :columns="formSetTableColumns"
        :data="post_formSetTableData"
      >
      </Table>
    </Modal>
  </div>
</template>

<script>
export default {
  beforeRouteLeave(to, from, next) {
    if (this.type == 1 || this.type == 2) {
      if (to.path != "/cms/ordermannage/businessorderlist/list") {
        this.$Modal.confirm({
          title: "提示",
          content: "切换页面会导致数据丢失，是否确认切换？",
          onOk: () => {
            next(() => {});
          },
          onCancel: () => {},
        });
      } else {
        if (this.isAllowLeave) {
          next(() => {});
        } else {
          this.$Modal.confirm({
            title: "提示",
            content: "切换页面会导致数据丢失，是否确认切换？",
            onOk: () => {
              next(() => {});
            },
            onCancel: () => {},
          });
        }
      }
    } else {
      next(() => {});
    }
  },
  data() {
    const validateMobile = function(rule, value, fn) {
      if (!/^1[3456789]\d{9}$/.test(value)) {
        fn(new Error(" "));
        return false;
      }
      fn();
    };
    return {
      formObjs: {
        order_no: 1,
        residential_name: 1,
        client_name: 1,
        warning_state: 1,
        service_id: 1,
        pay_state: 1,
        address: 1,
        mobile: 1,
        start_time: 1,
        end_time: 1,
        predict_price: 1,
        predict_working: 1,
        predict_time: 1,
        remark: 1,
      },
      formObjs_reset: {
        order_no: 1,
        residential_name: 1,
        warning_state: 1,
        front_money: 1,
        start_time: 1,
        client_name: 1,
        custom_detail_name: 1,
        custom_detail_mobile: 1,
        custom_detail_id: 1,
        service_id: 1,
        end_time: 1,
        predict_price: 1,
        order_price: 1,
        box_id: 1,
        remark: 1,
        pay_state: 1,
      },
      tree_btn_show: false,
      showForms: false,
      forms_list: [],
      type: 1,
      order_no: this.$route.query.order_no,
      modalArray: [
        { type_name: "产品1", num: 1, id: 0, metalArray: [], extArray: [] },
      ],
      modalData: {},
      productList: [],
      metalList: [],
      extList: [],
      coumstList: [],
      tableWidth: null,
      users: [],
      lock_list: [],
      headers: { Authorization: localStorage.getItem("token") },
      uploadData: {
        order_no: this.$route.query.order_no,
        title: "",
      },
      title_state: 0,
      clientList: [],
      clientDetailList: [],
      clientDetailList_mobile: [],
      clientDetailList_respon: [],
      clientDetailList_address: [],
      tableData: [],
      showAddProduct: false,
      showEditProduct: false,
      infoRules: {
        residential_name: [{ required: true, message: " ", trigger: "blur" }],
        warning_state: [{ required: true, message: " " }],
        pay_state: [{ required: true, message: "" }],
        predict_price: [{ required: true, message: " " }],
        fax_price: [{ required: true, message: " " }],
        order_price: [{ required: true, message: " " }],
        custom_id: [{ required: true, message: " " }],
        start_time: [{ required: true, message: " " }],
        end_time: [{ required: true, message: " " }],
        box_id: [{ required: true, message: " " }],
        remark: [{ required: true, message: " " }],
      },
      info: {
        residential_name: "", //项目名称
        order_no: "", //订单号
        client_name: "", //客户名称
        address: "", //
        mobile: "", //手机号
        start_time: new Date().toLocaleDateString().replace(/\//g, "-"), //开始时间
        end_time: "", //结束时间
        pay_state: "", //是否支付
        warning_state: 1, //是否紧急
        predict_time: "", //预估交付日期
        service_id: null, //业务员
        predict_price: null, //预估工价,
        predict_working: null, //预估工期
        remark: "",
        img: [],
        front_money: 0,
      },
      process_match_list: [],
      process_all_list: [],
      img: [],
      sub_material_list: [],
      showCurrencyOnly: false,
      options: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        },
      },
      editForm: {},
      is_material_show: false,
      currencyIndex: null,
      currentTabIndex: "0",
      parts_title_count: [],
      wood_title_count: [],
      isCheck: false,
      warningList: [],
      process_Select_match_list: [], //选中的list
      originalTableColumns: [
        { title: "原材料名称", align: "center", key: "title" },
        { title: "原材料库存", align: "center", key: "stock" },
        { title: "所需原材料数量", align: "center", key: "num" },
        // { title: '原材料单价', align: 'center', key: 'price' },
        {
          title: "规格型号",
          align: "center",
          key: "specifications",
          render: (h, params) => {
            const { row } = params;
            let text = "";
            row.long ? (text += "L" + row.long + "*") : "";
            row.wide ? (text += "W" + row.wide + "*") : "";
            row.high ? (text += "H" + row.high + "*") : "";
            text = text.substring(0, text.length - 1);
            return h("span", {}, text);
          },
        },
        { title: "原材料单位", align: "center", key: "unit" },
        {
          title: "原材料预估费用",
          align: "center",
          key: "total_price",
        },
      ],
      originalData: [],
      isAllowLeave: false,
      pre_process_obj: {},
      route_id_at_copy: "",
      formSetTableColumns: [
        {
          title: "是否展示",
          align: "center",
          key: "is_show",
          minWidth: 60,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.post_formSetTableData[index])
            );
            return h("Checkbox", {
              props: {
                value: currentRow.is_show,
                disabled:
                  currentRow.key == "order_no" ||
                  currentRow.key == "residential_name" ||
                  currentRow.key == "warning_state" ||
                  currentRow.key == "start_time" ||
                  currentRow.key == "end_time" ||
                  currentRow.key == "client_name" ||
                  currentRow.key == "predict_price" ||
                  currentRow.key == "box_id" ||
                  currentRow.key == "predict_price" ||
                  currentRow.key == "order_price" ||
                  currentRow.key == "fax_price" ||
                  currentRow.key == "remark",
              },
              on: {
                "on-change": (e) => {
                  currentRow.is_show = e;
                  this.post_formSetTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
        {
          title: "字段名",
          align: "center",
          key: "value",
          minWidth: 100,
        },
        {
          title: "展示名称",
          align: "center",
          key: "title",
          minWidth: 100,
          render: (h, params) => {
            const { index } = params;
            const currentRow = JSON.parse(
              JSON.stringify(this.post_formSetTableData[index])
            );
            return h("Input", {
              props: {
                value: currentRow.title,
                type: "text",
              },
              on: {
                "on-change": (e) => {
                  currentRow.title = e.target.value;
                  this.post_formSetTableData.splice(index, 1, currentRow);
                },
              },
            });
          },
        },
      ],
      formSetTableData: [
        {
          is_show: true,
          key: "order_no",
          value: "订单编号",
          title: "订单编号",
        },
        {
          is_show: true,
          key: "residential_name",
          value: "项目名称",
          title: "项目名称",
        },
        {
          is_show: true,
          key: "warning_state",
          value: "紧急程度",
          title: "紧急程度",
        },
        {
          is_show: true,
          key: "front_money",
          value: "项目定金",
          title: "项目定金",
        },
        {
          is_show: true,
          key: "start_time",
          value: "开始日期",
          title: "开始日期",
        },
        {
          is_show: true,
          key: "client_name",
          value: "客户名称",
          title: "客户名称",
        },
        {
          is_show: true,
          key: "custom_detail_name",
          value: "负责人",
          title: "负责人",
        },
        {
          is_show: true,
          key: "custom_detail_mobile",
          value: "手机号",
          title: "手机号",
        },
        {
          is_show: true,
          key: "custom_detail_id",
          value: "详细地址",
          title: "详细地址",
        },
        {
          is_show: true,
          key: "service_id",
          value: "专营业务员",
          title: "专营业务员",
        },
        {
          is_show: true,
          key: "end_time",
          value: "交付日期",
          title: "交付日期",
        },
        {
          is_show: true,
          key: "predict_price",
          value: "产品总价",
          title: "产品总价",
        },
        {
          is_show: true,
          key: "order_price",
          value: "订单金额",
          title: "订单金额",
        },
        {
          is_show: true,
          key: "fax_price",
          value: "折扣金额",
          title: "折扣金额",
        },
        { is_show: true, key: "box_id", value: "包装", title: "包装" },
        { is_show: true, key: "remark", value: "订单备注", title: "订单备注" },
      ],
      post_formSetTableData: [],
      charge_list: [],
      cus_list: [],
      pre_bp_id: "",
      support_remark: [],
    };
  },
  computed: {
    predict_price_clac() {
      let sum = 0;
      return sum;
    },
  },
  watch: {},
  created() {
    // 获取负责人列表
    this.axios.get("/api/support_service_name").then((res) => {
      this.clientDetailList_respon = [];
      res.data.map((item) => {
        this.clientDetailList_respon.push({ service_name: item });
      });
      this.charge_list = JSON.parse(
        JSON.stringify(this.clientDetailList_respon)
      );
    });
    // 获取设置表单
    this.get_forms();
    // 获取紧急程度
    this.axios.get("/api/warning_list").then((res) => {
      (this.warningList = res.data.data),
        (this.info.warning_state = this.warningList[0].id);
    });
    // 获取客户列表
    this.axios.get("/api/custom_list").then((res) => {
      this.cus_list = JSON.parse(JSON.stringify(res.data.data));
      this.clientList = 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/material", { params: { sub_type_id: 4 } })
      .then((res) => {
        if (res.code == 200) {
          this.sub_material_list = res.data.data;
        }
      });
    // 获取附加列表
    this.axios.get("/api/project_ext_list").then((res) => {
      if (res.code == 200) {
        this.extList = res.data.data;
      }
    });
    let date1 = new Date();
    let date2 = new Date();
    date2.setDate(date1.getDate() + 30);
    this.info.end_time = date2;
    this.tableWidth = window.innerWidth - 300;
    this.getUsers();
    this.type = this.$route.query.type;
    // this.axios("/api/order_get_forms").then((res) => {
    //   if (res.code == 200) {
    //     this.forms_list = res.data;
    //     this.postForms(0);
    //   }
    // });
    this.getCoumstList();
    this.getLockList();
  },
  mounted() {
    if (this.order_no) {
      if (this.order_no) {
        this.info = {};
      }
      this.initData(this.order_no);
    }
    this.getProducts();
    addEventListener("resize", (e) => {
      this.tableWidth = e.target.innerWidth - 300;
      this.$forceUpdate();
    });
  },
  methods: {
    get_forms() {
      this.axios
        .post("/api/update/get_table", { id: "businessorderlist_detail" })
        .then((res) => {
          if (Array.isArray(res.data)) {
            this.post_formSetTableData = JSON.parse(
              JSON.stringify(this.formSetTableData)
            );
          } else {
            if (res.data.table.formSet && res.data.table.formSet.length > 0) {
              this.formSetTableData = JSON.parse(
                JSON.stringify(res.data.table.formSet)
              );
              this.post_formSetTableData = JSON.parse(
                JSON.stringify(res.data.table.formSet)
              );
            } else {
              this.post_formSetTableData = JSON.parse(
                JSON.stringify(this.formSetTableData)
              );
            }
          }
        });
    },
    back() {
      // this.$router.go(-1);
      this.$router.push({
        path: "/cms/ordermannage/businessorderlist/list",
      });
    },
    postForms(n) {
      this.post_formSetTableData.forEach((element, index) => {
        element.sort = index;
      });
      this.axios({
        method: "post",
        url: "/api/update/table",
        data: {
          id: "businessorderlist_detail",
          result: {
            formSet: this.post_formSetTableData,
          },
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$Message.success(res.msg);
          // this.initData(this.order_no);
          this.get_forms();
        }
      });
      // let result = [];
      // this.forms_list.map((rows) => {
      //   for (let i in this.formObjs_reset) {
      //     // if (i == rows) {
      //     result.push(i);
      //     // }
      //   }
      // });
      // const news_forms = {};
      // this.post_formSetTableData = JSON.parse(JSON.stringify(this.formSetTableData))
      // result.forEach((element) => {
      //   news_forms[element] = 1;
      // });
      // this.formObjs = news_forms;
      // if (n) {
      //   this.axios
      //     .post("/api/order_set_form", {
      //       result: this.post_formSetTableData,
      //       all: Object.keys(this.formObjs_reset),
      //     })
      //     .then((res) => {
      //       if (res.code == 200) {
      //         this.$Message.success(res.msg);
      //       }
      //     });
      // }
    },
    postData() {
      let sendData = JSON.parse(JSON.stringify(this.info));
      // sendData.custom_detail_id = sendData.custom_id
      let sendList = JSON.parse(JSON.stringify(this.tableData));
      sendList.map((item) => {
        delete item.part;
      });
      this.tableData.map((item, index) => {
        item.part.map((it, idx) => {
          if (!it.is_metal) {
            if (!sendList[index].part) {
              sendList[index].part = [];
            }
            sendList[index].part.push(it);
          }
        });
      });
      // sendList= this.tableData.filter(item)
      sendList.map((element) => {
        element.part.map((elem) => {
          if (!elem.is_metal) {
            // elem.part_detail = elem.sub_part;
            if (!elem.part_detail) {
              elem.part_detail = elem.sub_part;
            }
            elem.part_detail.map((el) => {
              el.material_num = el.material_detail_num;
            });
          }
        });
      });
      try {
        sendData.start_time = new Date(sendData.start_time)
          .toLocaleDateString()
          .replace(/\//g, "-");
        sendData.end_time = new Date(sendData.end_time)
          .toLocaleDateString()
          .replace(/\//g, "-");
      } catch (e) {
        console.log(e);
      }
      let params = { ...sendData, product: sendList, renovation_type: 2 };
      this.axios.post("/api/order_save_new", params).then((res) => {
        if (res.code == 200) {
          this.$Message.success(res.msg);
          this.isAllowLeave = true;
          this.back();
        }
      });
    },
    handleProductCopy() {
      let idx = this.$refs.tabsRef.activeKey;
      let obj = JSON.parse(JSON.stringify(this.modalArray[idx]));
      obj.index = JSON.parse(JSON.stringify(this.modalArray.length));
      this.pre_bp_id = this.modalArray[idx].bp_id;
      this.modalArray.push(obj);
    },
    handleProductDele() {
      let idx = this.$refs.tabsRef.activeKey;
      this.modalArray.splice(idx, 1);
    },
    handleTabsAdd() {
      let index = JSON.parse(JSON.stringify(this.modalArray.length));
      this.modalArray.push({
        type_name: "产品" + (this.modalArray.length + 1),
        position: "",
        index,
        extArray: [{ type: 2 }],
        metalArray: [{ type: 1 }],
      });
    },
    handleShowMaterial() {
      this.is_material_show = !this.is_material_show;
    },
    initData(order_no) {
      this.axios("/api/order_detail_new", { params: { order_no } }).then(
        (res) => {
          //获取合计
          // this.wood_title_count = res.data.materials;
          // let total_line = 0;
          // let total_line_unit;
          // this.wood_title_count.forEach((element) => {
          //   element.measure_str = element.measure;
          //   for (const key in element.measure_str) {
          //     const elem = element.measure_str[key];
          //     total_line += elem.num;
          //   }
          //   total_line_unit = element.unit;
          // });
          // this.parts_title_count = res.data.parts;
          // this.parts_title_count.push({
          //   title: "线 条",
          //   num: total_line,
          //   unit: total_line_unit,
          // });
          //获取产品
          this.info = res.data;
          this.info.img = this.info.imgs;
          this.tableData = res.data.product_list;
          this.tableData.forEach((element) => {
            // 数据第一次通过接口获取
            element.get_first_data = true;
            //保存用数据
            element.other = element.customize;
            element.process_str = element.process;
            // 部件尺寸不展示字母
            element.measurement_no_letter = JSON.parse(
              JSON.stringify(element.measurement)
            );
            element.measure.map((v) => {
              element.measurement_no_letter = element.measurement_no_letter.replace(
                new RegExp(v.e_title, "g"),
                ""
              );
            });
            element.part.forEach((elem) => {
              if (!elem.is_metal) {
                // 表格数据展示字段
                elem.process_str = elem.process;
                elem.measurement = elem.measure;
                let measure_arr = elem.measure.split("*");
                elem.long = measure_arr[0];
                elem.wide = measure_arr[1];
                elem.high = measure_arr[2];
              }
            });
            // 拆分测量字段
            // let product_measure = element.measurement.split('*')
            element.measure.forEach((elem) => {
              element[elem.e_title] = elem.value;
            });
            // 拼五金展示用
            if (element.ext_list && element.ext_list.length > 0) {
              element.ext_list.map((elem) => {
                if (elem.type == 1) {
                  elem.total_num = elem.num;
                  elem.unit_price = elem.price;
                  elem.ext_price = elem.num * elem.price;
                  elem.is_metal = true;
                  element.part.push(elem);
                } else {
                  if (!element.extra) {
                    element.extra = "";
                  }
                  element.extra += `${elem.title}/`;
                }
              });
              if (element.extra) {
                element.extra = element.extra.substring(
                  0,
                  element.extra.length - 1
                );
              }
            }
          });
          this.forms_list = res.tableSet || [];
          // 查看详情时获取原材料信息
          this.originalData = res.data.material_list;
          this.originalData.forEach((element) => {
            element.total_price = (element.num * element.price).toFixed(2);
          });
          this.handleCalcCount();
          //获取客户信息
          this.axios
            .get("/api/custom_detail", { params: { id: res.data.custom_id } })
            .then((re) => {
              this.clientDetailList = re.data.list;
              const _temp = this.clientDetailList.filter(
                (item) => item.id == res.data.custom_detail_id
              );
              this.info.custom_detail_name = _temp[0].service_name;
              this.info.custom_detail_mobile = _temp[0].mobile;
              // 去重负责人
              this.clientDetailList_respon = this.unique(re.data.list);
              // 取负责人名字
              // 取出手机号码是该负责人的
              this.clientDetailList_mobile = this.unique(re.data.list);
              this.clientDetailList_mobile = this.clientDetailList.filter(
                (item) => item.service_name == this.info.custom_detail_name
              );
              // 去重手机号码
              this.clientDetailList_mobile = this.unique(
                this.clientDetailList_mobile
              );
              // 取出地址是该负责人的
              this.clientDetailList_address = this.clientDetailList.filter(
                (item) => item.service_name == this.info.custom_detail_name
              );
              this.fax = re.data.detail.fax;
              // 修改价格
              let sum = 0;
              this.tableData.forEach((element) => {
                sum += element.price * 1;
              });
              this.info.service_id = re.data.detail.service_id;
              this.info.predict_price = sum.toFixed(2);
              this.info.order_price = (
                (this.info.predict_price * this.fax) /
                100
              ).toFixed(2);
              this.info.fax_price = (
                this.info.predict_price - this.info.order_price
              ).toFixed(2);
              this.$forceUpdate();
            });
        }
      );
    },
    addHours(row) {
      row.push({
        unit: null,
        layer: null,
        number: null,
        product: [{ product_id: "" }],
      });
    },
    getProducts() {
      this.axios("/api/product").then(
        (res) => (this.productList = res.data.data)
      );
    },
    cancelModal() {
      // this.modalArray = [{}]
      this.showAddProduct = false;
      this.showEditProduct = false;
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.postData();
        }
      });
    },
    handleAddProductSubmit() {
      this.$Modal.confirm({
        content: "请确认线条名称是否正确！",
        onOk: () => {
          let flag = false;
          this.modalArray.map((v) => {
            v.part.map((w) => {
              if (w.change_id == "") {
                flag = true;
              }
            });
          });
          if (flag) {
            return this.$Message.warning("部件信息请填写完整！");
          }
          this.modalArray.forEach((element) => {
            // 工艺属性
            if (!element.procedure_properties_str) {
              element.procedure_properties_str = [];
            }
            if (!element.procedure_properties) {
              element.procedure_properties = [];
            }
            element.process.forEach((elem, index) => {
              const _temp = elem.processList.filter(
                (item) => item.id == elem.value
              );
              element.procedure_properties_str[index] =
                _temp.length > 0 ? _temp[0].title : "";
              element.procedure_properties[index] =
                _temp.length > 0 ? _temp[0].id : "";
            });
            element.process_str = element.procedure_properties_str.join("/");
            // 尺寸
            if (!element.measurement) {
              element.measurement = "";
            }
            if (!element.measurement_no_letter) {
              element.measurement_no_letter = "";
            }
            let tempStr = "";
            let tempStr_no_letter = "";
            element.measure.forEach((elem) => {
              tempStr += elem.measureCalc + elem.value + "*";
              tempStr_no_letter += +elem.value + "*";
            });
            element.measurement = tempStr.substring(0, tempStr.length - 1);
            element.measurement_no_letter = tempStr_no_letter.substring(
              0,
              tempStr_no_letter.length - 1
            );
            // 五金、  附加项目
            element.ext = [...element.metalArray, ...element.extArray];
            //其他项
            element.other = element.customize;
            // 部件字段
            element.part.forEach((elem) => {
              if (!elem.is_metal) {
                elem.title ? "" : (elem.title = elem.part_title);
                // if (elem.procedure_properties_str && elem.procedure_properties_str != 0) {
                //   elem.process_str = elem.procedure_properties_str.join('/')
                // } else {
                elem.procedure_properties_str = [];
                elem.process.forEach((item, index) => {
                  const _temp = item.cld.filter(
                    (_cld) => _cld.id == item.procedure_property
                  );
                  elem.procedure_properties_str[index] =
                    _temp.length > 0 ? _temp[0].title : "";
                });
                elem.process_str = elem.procedure_properties_str.join("/");
                // }
              }
            });
            element.ext &&
              element.ext.length > 0 &&
              (element.ext.map((elem) => {
                if (elem.type == 1) {
                  elem.total_num = elem.num;
                  elem.unit_price = elem.price;
                  elem.ext_price = elem.num * elem.price;
                  elem.is_metal = true;
                  element.part.push(elem);
                  if (!element.extra) {
                    element.extra = "";
                  }
                } else {
                  if (!element.extra) {
                    element.extra = "";
                  }
                  element.extra += `${elem.title}/`;
                }
              }),
              (element.extra = element.extra.substring(
                0,
                element.extra.length - 1
              )));
            // element.part.push({
            //   title: "五金",
            //   total_num: "",
            //   unit_price: "",
            // });
          });
          this.modalArray.forEach((element) => {
            element.part.forEach((elem) => {
              if (!elem.is_metal) {
                elem.measurement = `${elem.long}*${elem.wide}*${elem.high}`;
                elem.title = elem.part_title;
                elem.procedure_properties = [];
                elem.process.map((item) => {
                  elem.procedure_properties.push(item.procedure_property);
                });
              }
            });
          });
          this.tableData = [...this.tableData, ...this.modalArray];
          this.currencyIndex = null;
          this.route_id_at_copy = "";
          // 合计 、 线条 统计价格
          this.handleCalcCount();
          this.showAddProduct = false;
          this.$forceUpdate();
        },
        onCancel: () => {},
      });
    },
    handleEditProductSubmit() {
      this.$Modal.confirm({
        content: "请确认线条名称是否正确！",
        onOk: () => {
          const checkArr = this.modalData.part.filter((v) => {
            return !v.change_id && !v.is_metal;
          });
          if (checkArr.length > 0) {
            return this.$Message.warning("部件信息请填写完整！");
          }
          // 工艺属性
          if (!this.modalData.procedure_properties_str) {
            this.modalData.procedure_properties_str = [];
          }
          this.modalData.process.forEach((elem, index) => {
            const _temp = elem.processList.filter(
              (item) => item.id == elem.value
            );
            this.modalData.procedure_properties_str[index] =
              _temp.length > 0 ? _temp[0].title : "";
          });
          this.modalData.process_str = this.modalData.procedure_properties_str.join(
            "/"
          );
          // 尺寸
          if (!this.modalData.measurement) {
            this.modalData.measurement = "";
          }
          if (!this.modalData.measurement_no_letter) {
            this.modalData.measurement_no_letter = "";
          }
          let tempStr = "";
          let tempStr_no_letter = "";
          this.modalData.measure.forEach((elem) => {
            tempStr += elem.measureCalc + elem.value + "*";
            tempStr_no_letter += elem.value + "*";
          });
          this.modalData.measurement = tempStr.substring(0, tempStr.length - 1);
          this.modalData.measurement_no_letter = tempStr_no_letter.substring(
            0,
            tempStr_no_letter.length - 1
          );
          // 五金、  附加项目
          this.modalData.ext = [
            ...this.modalData.metalArray,
            ...this.modalData.extArray,
          ];
          //其他项
          this.modalData.other = this.modalData.customize;
          // 部件字段
          this.modalData.part.forEach((elem, idx) => {
            if (!elem.is_metal) {
              elem.title ? "" : (elem.title = elem.part_title);
              // if (elem.procedure_properties_str && elem.procedure_properties_str != 0) {
              //   elem.process_str = elem.procedure_properties_str.join('/')
              // } else {
              elem.procedure_properties_str = [];
              if (elem.process) {
                elem.process.forEach((item, index) => {
                  const _temp = item.cld.filter(
                    (_cld) => _cld.id == item.procedure_property
                  );
                  elem.procedure_properties_str[index] =
                    _temp.length > 0 ? _temp[0].title : "";
                });
                elem.process_str = elem.procedure_properties_str.join("/");
                elem.procedure_properties = [];
                elem.process.map((item) => {
                  elem.procedure_properties.push(item.procedure_property);
                });
                console.log(
                  "elem.procedure_properties :>> ",
                  elem.procedure_properties
                );
              }
              // }
            } else {
              this.modalData.part.splice(idx, 1);
            }
          });
          this.modalData.metalArray.map((item) => {
            const obj = {
              total_num: item.num,
              title: item.title,
              unit_price: item.price,
              ext_price: item.num * item.price,
              is_metal: true,
            };
            this.modalData.part.push(obj);
          });
          this.modalData.extra = "";
          this.modalData.extArray.map((item) => {
            const temp = this.extList.filter((it) => it.id == item.ext_id);
            temp && temp.length > 0 && (item.title = temp[0].title);
          });
          this.modalData.extra = this.modalData.extArray.reduce((pre, cur) => {
            return pre + `${cur.title}/`;
          }, "");
          this.modalData.extra = this.modalData.extra.substring(
            0,
            this.modalData.extra.length - 1
          );
          const _temp = this.productList.filter(
            (item) => item.id == this.modalData.product_id
          );
          this.modalData.title = _temp[0].title;
          this.tableData.splice(this.currencyIndex, 1, this.modalData);
          this.route_id_at_copy = "";
          // 合计 、 线条 统计价格
          this.handleCalcCount();
          this.showEditProduct = false;
          this.$forceUpdate();
        },
        onCancel: () => {},
      });
    },
    // 合计 、 线条 统计价格
    handleCalcCount() {
      let sum = 0;
      this.parts_title_count = [];
      this.wood_title_count = [];
      let total_line_unit = "";
      this.tableData.forEach((element) => {
        sum += element.price * 1;
        element.part.forEach((elem) => {
          if (!elem.is_metal) {
            // 统计部件
            const temp = this.parts_title_count.filter(
              (item) => item.title == elem.title
            );
            if (temp && temp.length > 0) {
              this.parts_title_count.map((v) => {
                v.title == elem.title && v.num++;
              });
            } else {
              this.parts_title_count.push({
                title: elem.title,
                num: elem.num || 1,
                unit: elem.unit,
              });
            }
            // 如果没有点开产品详情的话找不到 part_detail
            if (!elem.part_detail) {
              elem.part_detail = elem.sub_part;
            }
            // 部件中要统计所有线条数量
            elem.part_detail &&
              elem.part_detail.length > 0 &&
              elem.part_detail.forEach((el) => {
                if (el.material_detail_title.indexOf("线条") != -1) {
                  const temp = this.wood_title_count.filter(
                    (item) => item.title == el.material_detail_title
                  );
                  if (temp && temp.length > 0) {
                    // 匹配规格是否已存在
                    const _temp = temp[0].measure_str.filter(
                      (item) => item.id == el.material_detail_id
                    );
                    if (_temp && _temp.length > 0) {
                      this.wood_title_count.map((v) => {
                        v.title == el.material_detail_title &&
                          v.measure_str.map((item) => {
                            if (item.id == el.material_detail_id) {
                              item.num =
                                item.num * 1 + el.material_detail_num * 1;
                            }
                          });
                      });
                    } else {
                      // 不存在一样规格
                      if (
                        el.material_detail_list &&
                        el.material_detail_list.length > 0
                      ) {
                        const __temp = el.material_detail_list.filter(
                          (item) =>
                            item.material_detail_id == el.material_detail_id
                        );
                        this.wood_title_count.map((v) => {
                          v.title == el.material_detail_title &&
                            ((v.unit = __temp[0].unit),
                            v.measure_str.push({
                              num: el.material_detail_num,
                              id: __temp[0].material_detail_id,
                              measure: `${__temp[0].long || 0}*${__temp[0]
                                .wide || 0}*${__temp[0].high || 0}`,
                            }));
                        });
                      } else {
                        this.wood_title_count.map((v) => {
                          v.title == el.material_detail_title &&
                            ((v.unit = el.unit),
                            v.measure_str.push({
                              num: el.material_detail_num,
                              id: el.material_detail_id,
                              measure: `${el.long || 0}*${el.wide ||
                                0}*${el.high || 0}`,
                            }));
                        });
                      }
                    }
                  } else {
                    // 不存在就新增
                    if (
                      el.material_detail_list &&
                      el.material_detail_list.length > 0
                    ) {
                      const _temp = el.material_detail_list.filter(
                        (item) =>
                          item.material_detail_id == el.material_detail_id
                      );
                      if (_temp && _temp.length > 0) {
                        if (!total_line_unit) {
                          total_line_unit = _temp[0].unit;
                        }
                        this.wood_title_count.push({
                          title: el.material_detail_title,
                          unit: total_line_unit,
                          measure_str: [
                            {
                              num: el.material_detail_num,
                              id: _temp[0].material_detail_id,
                              measure: `${_temp[0].long || 0}*${_temp[0].wide ||
                                0}*${_temp[0].high || 0}`,
                              unit: _temp[0].unit,
                            },
                          ],
                        });
                      }
                    } else {
                      if (!total_line_unit) {
                        total_line_unit = el.unit;
                      }
                      this.wood_title_count.push({
                        title: el.material_detail_title,
                        unit: total_line_unit,
                        measure_str: [
                          {
                            num: el.material_detail_num,
                            id: el.material_detail_id,
                            measure: `${el.long || 0}*${el.wide ||
                              0}*${el.high || 0}`,
                            unit: el.unit,
                          },
                        ],
                      });
                    }
                  }
                }
              });
          }
        });
      });
      // 数线条
      let total_line = 0;
      this.wood_title_count.map((v) => {
        v.measure_str.map((w) => {
          total_line += w.num;
        });
      });
      // 线条合计放进统计
      this.parts_title_count.push({
        title: "线 条",
        num: total_line,
        unit: total_line_unit,
      });
      // 计算价格
      this.info.predict_price = sum.toFixed(2);
      this.info.order_price = (
        (this.info.predict_price * this.fax) /
        100
      ).toFixed(2);
      this.info.fax_price = (
        this.info.predict_price - this.info.order_price
      ).toFixed(2);
    },
    getUsers() {
      this.axios("/api/employee_list").then((res) => (this.users = res.data));
    },
    handleExtraAdd(array, type) {
      array.push({
        num: 0,
        price: 0,
        total_price: 0,
        type,
        remark: "",
        title: "",
        is_metal: true,
      });
      this.$forceUpdate();
    },
    handleExtraDele(array, row, index, modalData) {
      array.splice(index, 1);
      this.handleTotalPriceCalc(row, modalData);
      this.$forceUpdate();
    },
    getCoumstList() {
      this.axios("/api/bpp_list").then((res) => {
        res.data.map((v) => {
          if (v.select) {
            v.cld.map((z) => {
              v.select.map((k) => {
                z.show = k == z.id ? true : false;
              });
            });
          } else {
            v.cld.map((v) => (v.show = false));
          }
        });
        this.coumstList = res.data;
      });
    },
    handleRemarkCreate(val) {
      this.support_remark.push(val);
    },
    getLockList() {
      this.axios("/api/lock_list").then((res) => (this.lock_list = res.data));
    },
    modalVisibleChange(e) {
      if (!e) {
        this.cancelModal();
      }
    },
    unique(array) {
      let arr = JSON.parse(JSON.stringify(array));
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i].service_name == arr[j].service_name) {
            //第一个等同于第二个，splice方法删除第二个
            arr.splice(j, 1);
            j--;
          }
        }
      }
      return arr;
    },
    handleClientChange(id) {
      if (id) {
        this.axios({
          method: "get",
          url: "/api/custom_detail",
          params: { id },
        }).then((res) => {
          this.info.custom_id = id;
          this.clientDetailList = res.data.list;
          // 去重负责人
          this.clientDetailList_respon = this.unique(res.data.list);
          // 赋值默认负责人
          this.info.custom_detail_name = this.clientDetailList_respon[0].service_name;
          // 取出手机号码是该负责人的
          this.clientDetailList_mobile = this.clientDetailList.filter(
            (item) => item.service_name == this.info.custom_detail_name
          );
          // 赋值默认手机号码
          this.info.custom_detail_mobile = this.clientDetailList_mobile[0].mobile;
          // 去重手机号码
          this.clientDetailList_mobile = this.unique(
            this.clientDetailList_mobile
          );
          // 取出地址是该负责人的
          this.clientDetailList_address = this.clientDetailList.filter(
            (item) => item.service_name == this.info.custom_detail_name
          );
          // 赋值默认地址
          this.info.custom_detail_id = this.clientDetailList_respon[0].id || 0;
          this.info.service_id = res.data.detail.service_id;
          this.fax = res.data.detail.fax;
          this.$forceUpdate();
        });
      } else {
        this.clientDetailList_respon = JSON.parse(
          JSON.stringify(this.charge_list)
        );
        this.clientList = JSON.parse(JSON.stringify(this.cus_list));
      }
    },
    handleSpan({ row, column, rowIndex, columnIndex }) {
      if (row.end) {
        return [1, 6];
      }
    },
    handleSummary({ columns, data }) {
      const sums = {};
      columns.forEach((column, index) => {
        const key = column.key;
        if (index === 0) {
          sums[key] = {
            key,
            value: "合计",
          };
          return;
        }
        const values = data.map((item) => Number(item[key]));
        if (!values.every((value) => isNaN(value))) {
          const v = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[key] = {
            key,
            value: v,
          };
        } else {
          sums[key] = {
            key,
            value: "",
          };
        }
      });
      return sums;
    },
    handleMetalChange(e, row, n, arr) {
      arr[n].ext_id = e.value;
      arr[n].title = e.label;
    },
    handleClientChargeChange(value) {
      if (value) {
        // if (this.info.custom_id) {
        //   this.info.custom_detail_name = value;
        //   // 取出手机号码是该负责人的
        //   this.clientDetailList_mobile = this.clientDetailList.filter(
        //     (item) => item.service_name == this.info.custom_detail_name
        //   );
        //   // 赋值默认手机号码
        //   this.info.custom_detail_mobile = this.clientDetailList_mobile[0].mobile;
        //   // 去重手机号码
        //   this.clientDetailList_mobile = this.unique(
        //     this.clientDetailList_mobile
        //   );
        //   // 取出地址是该负责人的
        //   this.clientDetailList_address = this.clientDetailList.filter(
        //     (item) => item.service_name == this.info.custom_detail_name
        //   );
        //   // 赋值默认地址
        //   this.info.custom_detail_id = this.clientDetailList_address[0].id || 0;
        // } else {
        this.axios
          .get("/api/support_custom_for_service", {
            params: { name: this.info.custom_detail_name },
          })
          .then((res) => {
            this.clientList = res.data.data;
            this.info.custom_id = res.data.data[0].id;
            this.axios({
              method: "get",
              url: "/api/custom_detail",
              params: { id: res.data.data[0].id },
            }).then((re) => {
              this.clientDetailList = re.data.list;
              // 取出手机号码是该负责人的
              this.clientDetailList_mobile = this.clientDetailList.filter(
                (item) => item.service_name == value
              );
              // 赋值默认手机号码
              this.info.custom_detail_mobile = this.clientDetailList_mobile[0].mobile;
              // 去重手机号码
              this.clientDetailList_mobile = this.unique(
                this.clientDetailList_mobile
              );
              // 取出地址是该负责人的
              this.clientDetailList_address = this.clientDetailList.filter(
                (item) => item.service_name == value
              );
              // 赋值默认地址
              this.info.custom_detail_id =
                this.clientDetailList_address[0].id || 0;
              this.info.service_id = re.data.detail.service_id;
              this.fax = re.data.detail.fax;
            });
          });
        // }
      } else {
        this.info.custom_detail_mobile = "";
        this.info.custom_detail_id = "";
        this.info.service_id = "";
        this.clientDetailList_respon = JSON.parse(
          JSON.stringify(this.charge_list)
        );
        this.clientList = JSON.parse(JSON.stringify(this.cus_list));
      }
    },
    handleClientDetailChange(value) {
      if (value) {
        // this.clientDetailList_mobile = this.clientDetailList.filter(
        //   (item) => item.service_name == this.info.custom_detail_name
        // );
        this.info.custom_detail_id = value;
        // this.info.address = row[0].address;
        // this.info.address = row[0].address;
        // this.info.mobile = row[0].mobile;
        this.$forceUpdate();
      }
    },
    getEditData(modalData, curData) {
      // console.log("modalData :>> ", modalData);
      // console.log("curData :>> ", curData);
      modalData.ext_price = curData.ext_price * 1 || 0;
      modalData.model = curData.model;
      modalData.num = curData.num || 1;
      modalData.num_temp_save = JSON.parse(JSON.stringify(modalData.num));
      modalData.over_price = curData.over_price * 1 || 0;
      modalData.position = curData.position;
      modalData.price = curData.price;
      modalData.product_id = curData.product_id;
      modalData.remark = curData.remark;
      modalData.route_id = curData.route_id;
      modalData.total_num = curData.total_num;
      modalData.unit = curData.unit;
      modalData.unit_price = curData.unit_price * 1 || 0;
      modalData.url_number = curData.url_number;
      modalData.metalArray = [];
      modalData.extArray = [];

      // 金额=（产品单价）*核算数量+超标金额+附加金额
      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);
      // 获取产品 type_name
      const temprow = this.productList.filter(
        (item) => item.id == curData.product_id
      );
      modalData.type_name = temprow[0].title;
      // 获取工艺属性
      // 如果route_id是0，工艺属性值取procedure_properties
      if (modalData.route_id == 0) {
        modalData.process.map((v, k) => {
          v.value = modalData.procedure_properties[k] * 1;
        });
      } else {
        this.process_match_list.forEach((element) => {
          if (element.id == curData.route_id) {
            modalData.process_ids = element.detail;
          }
        });
        modalData.process.forEach((element) => {
          //赋值测量字段
          for (const key in modalData.process_ids) {
            const ele = modalData.process_ids[key];
            if (element.key == key) {
              element.value = ele * 1;
            }
          }
        });
      }
      // 产品测量字段
      let product_measure = curData.measurement.split("*");
      for (let index = 0; index < product_measure.length; index++) {
        const item = product_measure[index];
        const product_measure_detail = [
          item.substring(0, 1),
          item.substring(1),
        ];
        modalData.measure.forEach((element) => {
          if (element.measureCalc == product_measure_detail[0]) {
            element.value = product_measure_detail[1];
          }
        });
      }
      // 拆分五金、附加信息
      if (!curData.ext) {
        curData.ext = curData.ext_list;
      }
      curData.ext.forEach((element) => {
        element.type == 1 && modalData.metalArray.push(element);
        element.type == 2 && modalData.extArray.push(element);
      });
      modalData.metalArray.forEach((element) => {
        element.material_id = element.ext_id;
        element.total_price = (element.price * element.num).toFixed(2);
      });
      modalData.extArray.forEach((element) => {
        element.id = element.ext_id;
        element.total_price = (element.price * element.num).toFixed(2);
      });
      // 同步 curData 、 modalData
      // for (
      //   let _modal_idx = 0;
      //   _modal_idx < modalData.part.length;
      //   _modal_idx++
      // ) {
      //   const _modal = modalData.part[_modal_idx];
      //   //匹配次数
      //   let match_idx = -1;
      //   // 相同次数
      //   let same_idx = 0;
      //   for (let _cur_idx = 0; _cur_idx < curData.part.length; _cur_idx++) {
      //     const _cur = curData.part[_cur_idx];
      //     if (
      //       _modal.part_id == _cur.part_id ||
      //       _modal.change_id == _cur.change_id
      //     ) {
      //       match_idx++;
      //     }
      //     if (match_idx == 1) {
      //       _modal.splice(
      //         _modal_idx,
      //         same_idx,
      //         JSON.parse(JSON.stringify(_cur))
      //       );
      //       match_idx--;
      //       same_idx++;
      //       _modal_idx++;
      //     }
      //   }
      //   if (match_idx == -1) {
      //     //modal存在但是cur不存在数据
      //     curData.part.splice(
      //       _modal_idx,
      //       0,
      //       JSON.parse(JSON.stringify(_modal))
      //     );
      //     modalData.isChoosed = false;
      //   } else if (match_idx == 0) {
      //     // modal 与 cur数量一致
      //   }
      // }
      // 处理部件
      curData.part.forEach((element, index) => {
        if (!element.is_metal) {
          modalData.part[index].change_id = element.change_id;
          modalData.part[index].part_title = element.part_title;
          modalData.part[index].org_part_id = JSON.parse(
            JSON.stringify(modalData.part[index].part_id)
          );
          // 部件测量字段
          if (element.measure && element.measure.length > 0) {
            const part_measure_detail = element.measure.split("*");
            modalData.part[index].long = part_measure_detail[0];
            modalData.part[index].wide = part_measure_detail[1];
            modalData.part[index].high = part_measure_detail[2];
          }
          // 替换项相关 如果选了替换项
          if (element.part_id != modalData.part[index].part_id) {
            const change_obj = modalData.part[index].change.filter(
              (item) => item.part_id == element.part_id
            );
            if (change_obj && change_obj.length > 0) {
              change_obj[0].sub_part.forEach((elem, idx) => {
                modalData.part[index].part_detail[idx].material_detail_title =
                  elem.material_detail_list[0].title;
                modalData.part[index].part_detail[idx].material_detail_id =
                  elem.material_detail_id;
                modalData.part[index].part_detail[idx].material_detail_list =
                  elem.material_detail_list;
              });
            }
          }
          element.sub_part.forEach((elem, idx) => {
            // 零部件字段 、 原材料字段
            modalData.part[index].part_detail[idx].long = elem.long;
            modalData.part[index].part_detail[idx].wide = elem.wide;
            modalData.part[index].part_detail[idx].high = elem.high;
            modalData.part[index].part_detail[idx].material_detail_id =
              elem.material_detail_id;
            modalData.part[index].part_detail[idx].material_detail_num =
              elem.material_detail_num;
            modalData.part[index].part_detail[idx].material_id =
              elem.material_id;
            modalData.part[index].part_detail[idx].num = elem.num;
          });
          modalData.part[index].part_id = element.part_id;
          // 工艺属性
          modalData.part[index].procedure_properties = JSON.parse(
            JSON.stringify(element.process)
          );
          for (let idx = 0; idx < element.process.length; idx++) {
            const item = element.process[idx];
            modalData.part[index].process.forEach((elem) => {
              elem.cld.forEach((el) => {
                if (el.id == item) {
                  elem.procedure_property = item * 1;
                }
              });
            });
            // modalData.part[index].process[idx].procedure_property = item * 1;
          }
        }
      });
    },
    handleSet(row, index, type) {
      let obj;
      // 1 新增 2 编辑 3 删除 4复制  5详情
      switch (type) {
        case 1:
          this.title_state = 1;
          if (this.info.custom_id) {
            this.modalArray = [
              {
                type_name: "产品1",
                num: 1,
                position: "位置",
                index: "0",
                metalArray: [],
                extArray: [],
              },
            ];
            this.currentTabIndex = "0";
            this.showAddProduct = true;
          } else {
            this.$Message.warning("请先选择客户");
          }
          break;
        case 2:
          this.title_state = 2;
          this.isCheck = false;
          if (this.type == 1) {
            this.showEditProduct = true;
            this.modalData = JSON.parse(JSON.stringify(row));
            this.currencyIndex = index;
          } else if (this.type == 2) {
            if (row.get_first_data) {
              this.axios
                .get("/api/order_product_detail_new", {
                  params: { order_product_id: row.order_product_id },
                })
                .then((res) => {
                  if (res.code == 200) {
                    this.currencyIndex = index;
                    this.modalData = JSON.parse(JSON.stringify(row));
                    this.editForm = res.data;
                    this.changeProductOnEdit(res.data, 0);
                  }
                });
            } else {
              this.modalData = JSON.parse(JSON.stringify(row));
              this.currencyIndex = index;
              this.showEditProduct = true;
            }
          }
          break;
        case 3:
          this.tableData.splice(index, 1);
          this.handleCalcCount();
          break;
        case 4:
          obj = JSON.parse(JSON.stringify(row));
          this.route_id_at_copy = row.route_id;
          obj.index = obj.index + 1;
          this.handleSetCopyId(obj, "_XID");
          this.tableData.splice(index, 0, obj);
          this.handleCalcCount();
          break;
        case 5:
          this.title_state = 3;
          this.isCheck = true;
          if (row.get_first_data) {
            this.axios
              .get("/api/order_product_detail_new", {
                params: { order_product_id: row.order_product_id },
              })
              .then((res) => {
                if (res.code == 200) {
                  this.currencyIndex = index;
                  this.modalData = JSON.parse(JSON.stringify(row));
                  this.editForm = res.data;
                  this.changeProductOnEdit(res.data, 0);
                }
              });
          } else {
            this.modalData = JSON.parse(JSON.stringify(row));
            this.currencyIndex = index;
            this.showEditProduct = true;
          }
          break;
      }
    },
    handleSetCopyId(obj, key) {
      // 浅拷贝，不需要返回
      const temp = obj[key].split("_");
      temp[1]++;
      obj[key] = temp.join("_");
    },
    async handleBeforeUpload(row) {
      // row.name
      this.uploadData.title = row.name.substring(0, row.name.indexOf("."));
      return true;
    },
    uploadError(err) {
      this.$Message.error(err.msg || "上传失败");
    },
    onProgress(e) {
      console.log(e);
    },
    //导入成功
    uploadSuccess(res) {
      if (res.code == 200) {
        this.$Message.success(res.msg || "上传成功");
        // const temp = res.data;
        // let list = [...this.postInfo.children, ...temp];
      } else {
        this.$Message.warning(res.msg || "上传失败");
      }
    },
    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);
    },
    handleSameProcessDisabled(array, currencyChooseValue, currencyChooseIndex) {
      let matchIds = array.selected_ids;
      let target = array.same_process;
      let source = array.same_process_compare;
      let chooseable = [];
      source.forEach((element, index) => {
        element.forEach((elem, idx) => {
          if (elem.id == currencyChooseValue) {
            chooseable = [...chooseable, ...element];
          }
        });
      });
      target.forEach((element) => {
        element.option.forEach((elem) => {
          elem.isAllowSelect = true;
          chooseable.forEach((el) => {
            if (el.id == elem.id) {
              elem.isAllowSelect = false;
            }
          });
        });
      });
      this.$forceUpdate();
    },
    changeLock(value, row, idx) {
      if (row.old_lock_price) {
        row.price = parseInt(row.price) - row.old_lock_price;
      }
      row.old_lock_price = parseInt(value.tag || "0");
      row.price = parseInt(row.price) + parseInt(value.tag || "0");
      this.modalArray[idx] = row;
      this.$forceUpdate();
    },
    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.metalArray.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();
    },
    handleTotalPriceCalc(row, item) {
      row.total_price = ((row.price || 0) * (row.num || 0)).toFixed(2);
      let sum1 = 0;
      item.metalArray &&
        item.metalArray.length > 0 &&
        item.metalArray.forEach((element) => {
          sum1 += element.total_price * 1 || 0;
        });
      let sum2 = 0;
      item.extArray &&
        item.extArray.length > 0 &&
        item.extArray.forEach((element) => {
          sum2 += element.total_price * 1 || 0;
        });
      item.ext_price = sum1 * 1 + 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();
    },
    handlePartDetailEdit(element, index) {
      element.isShowPartDetail = !element.isShowPartDetail;
      this.$forceUpdate();
    },
    handlePartsApart(element, index, array) {
      let obj = JSON.parse(JSON.stringify(element));
      obj.isBP = false;
      array.splice(index + 1, 0, obj);
      this.$forceUpdate();
    },
    handlePartsDele(element, index, array) {
      array.splice(index, 1);
      this.handleCalcCount();
      this.$forceUpdate();
    },
    handleProductPositionChange(item, e) {
      item.position = e.target.value;
      this.$forceUpdate();
    },
    changeAddProduct(row, n) {
      // route_id_at_copy
      if (row) {
        let id = row ? row.value : this.productList[0].id;
        this.modalArray[n].type_name = row.label;
        this.modalArray[n].title = row.label;
        this.axios("/api/order_get_product_detail_new", {
          params: { product_id: id, custom_id: this.info.custom_id },
        }).then((res) => {
          if (res.code == 200) {
            this.process_match_list = res.data.process.list;
            this.process_all_list = res.data.process.title;
            // 赋值默认工艺路线
            if (this.modalArray.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 = JSON.parse(JSON.stringify(_temp_obj));
            }
            let modalData = this.modalArray[n];
            this.support_remark = res.data.support_remark;
            // modalData.route_id = res.data.process.list[0].id;
            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 = JSON.parse(JSON.stringify(modalData.num));
            modalData.over_price = res.data.over_price || 0;
            modalData.position = res.data.position || "";
            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.model = res.data.model || ''
            // modalData.same_process_compare = JSON.parse(JSON.stringify(res.data.intermediate.same_process || []))
            modalData.selected_ids = [];
            modalData.part = res.data.part;
            modalData.part.forEach((element, index) => {
              // 选择不是附加项目的，
              if (!element.is_metal) {
                // 选择不是线条、或者基础档案中要默认为空的部件
                element.isBP = true;
                element.isChoosed = true;
                if (element.is_null == 1) {
                  element.change_id = "";
                } else {
                  element.part_detail = element.sub_part;
                  //展示非拆分部件
                  // 默认替换部件
                  element.change_id = element.change[0].id;
                  //存计算公式
                  element.long ? "" : (element.long = 0);
                  element.wide ? "" : (element.wide = 0);
                  element.high ? "" : (element.high = 0);
                  element.longCalc = JSON.parse(JSON.stringify(element.long));
                  element.wideCalc = JSON.parse(JSON.stringify(element.wide));
                  element.highCalc = JSON.parse(JSON.stringify(element.high));
                  element.part_detail.forEach((elem) => {
                    elem.org_num = JSON.parse(JSON.stringify(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 = JSON.parse(
                      JSON.stringify(elem.num || 0)
                    );
                    elem.long ? "" : (elem.long = 0);
                    elem.wide ? "" : (elem.wide = 0);
                    elem.high ? "" : (elem.high = 0);
                    elem.longCalc = JSON.parse(JSON.stringify(elem.long || ""));
                    elem.wideCalc = JSON.parse(JSON.stringify(elem.wide || ""));
                    elem.highCalc = JSON.parse(JSON.stringify(elem.high || ""));
                    elem.material_detail_list.forEach((el) => {
                      el.long = el.long || "0";
                      el.wide = el.wide || "0";
                      el.high = el.high || "0";
                    });
                  });
                }
              }
            });
            //测量字段
            modalData.measure = res.data.measure;
            modalData.measure.forEach((element) => {
              element.value = "";
              element.measureCalc = JSON.parse(JSON.stringify(element.e_title));
            });
            //工艺属性
            modalData.process = [];
            this.axios({
              method: "get",
              url: "/api/bpp_list",
            }).then((re) => {
              re.data.forEach((element) => {
                for (const key in res.data.process.title) {
                  const ele = res.data.process.title[key];
                  if (element.name == ele) {
                    if (this.route_id_at_copy) {
                      const compare_copy = res.data.process.list.filter(
                        (item) => item.id == this.route_id_at_copy
                      );
                      if (compare_copy && compare_copy.length > 0) {
                        if (!modalData.procedure_properties) {
                          modalData.procedure_properties = [];
                        }
                        modalData.procedure_properties[
                          modalData.process.lenngth
                        ] = compare_copy[0].detail[key] * 1;
                        modalData.process.push({
                          key: key,
                          title: ele,
                          value: compare_copy[0].detail[key] * 1,
                          processList: element.cld,
                        });
                      } else {
                        modalData.process.push({
                          key: key,
                          title: ele,
                          value: "",
                          processList: 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.push(
                          this.pre_process_obj[key] * 1
                        );
                        modalData.process.push({
                          key: key,
                          title: ele,
                          value: this.pre_process_obj[key] * 1,
                          processList: element.cld,
                        });
                      } else {
                        modalData.procedure_properties = [];
                        modalData.procedure_properties.push("");
                        modalData.process.push({
                          key: key,
                          title: ele,
                          value: "",
                          processList: element.cld,
                        });
                      }
                    }
                  }
                }
              });
              modalData.part.forEach((element) => {
                if (!element.is_metal) {
                  //赋值默认工艺属性
                  element.process = JSON.parse(JSON.stringify(re.data));
                  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.procedure_property = this.pre_process_obj[key] * 1;
                        elem.process_id = key;
                        if (!element.procedure_properties) {
                          element.procedure_properties = [];
                        }
                        element.procedure_properties[index] =
                          this.pre_process_obj[key] * 1;
                      }
                    }
                  });
                }
              });
              // 更换产品，分类不同，清空附加信息
              this.handleClearExtInfo(
                modalData,
                this.pre_bp_id,
                res.data.bp_id
              );
              // 是否有上一个的工艺属性ID
              // 因为现在出现2个入口 方法弃用
              // 在列表复制时需要被复制对象的工艺，在新增复制时同理
              // this.chooseLastRouteId(modalData, res);
              this.$forceUpdate();
            });
          }
        });
      }
    },
    handleOrderPriceChange(e, info) {
      this.info.order_price = e.target.value;
      this.info.fax_price = (this.info.predict_price - e.target.value).toFixed(
        2
      );
      this.$forceUpdate()
    },
    handleClearExtInfo(modalData, pre_id, cur_id) {
      if (cur_id != pre_id) {
        modalData.extArray = [];
        modalData.metalArray = [];
      } else {
        let sum = 0;
        modalData.extArray.map((v) => {
          return (sum += v.total_price * 1);
        });
        modalData.metalArray.map((v) => {
          return (sum += v.total_price * 1);
        });
        modalData.ext_price = sum;
        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);
      }
      this.pre_bp_id = cur_id;
    },
    changeEditProduct(row) {
      if (row) {
        let id = row ? row.value : this.productList[0].id;
        this.modalData.type_name = row.label;
        this.modalData.title = row.label;
        this.axios("/api/order_get_product_detail_new", {
          params: { product_id: id, custom_id: this.info.custom_id },
        }).then((res) => {
          if (res.code == 200) {
            this.process_match_list = res.data.process.list;
            this.process_all_list = res.data.process.title;
            this.support_remark = res.data.support_remark;
            // 赋值默认工艺路线
            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 = JSON.parse(JSON.stringify(_temp_obj));
            this.modalData.url = res.data.url;
            // this.modalData.route_id = res.data.process.list[0].id;
            this.modalData.total_num = res.data.total_num || 1;
            this.modalData.ext_price = res.data.ext_price || 0;
            this.modalData.unit_price = res.data.price || 0;
            this.modalData.num = res.data.num || 1;
            this.modalData.num = JSON.parse(JSON.stringify(res.data.num));
            this.modalData.over_price = res.data.over_price || 0;
            this.modalData.position = res.data.position || "";
            this.modalData.unit = res.data.unit || "";
            this.modalData.remark = res.data.remark || "";
            this.modalData.url_number = res.data.url_number || "";
            this.modalData.overdraft = res.data.overdraft;
            this.modalData.num_formula = res.data.num_formula;
            this.modalData.bp_id = res.data.bp_id;
            // 金额=（产品单价）*核算数量 +附加金额 + 超标金额
            this.modalData.price =
              (this.modalData.unit_price * 1 || 0) *
                (this.modalData.num * 1 || 1) +
              (this.modalData.over_price * 1 || 0) +
              (this.modalData.ext_price * 1 || 0);
            this.modalData.price = this.modalData.price.toFixed(2);
            // this.modalData.model = res.data.model || ''
            // this.modalData.same_process_compare = JSON.parse(JSON.stringify(res.data.intermediate.same_process || []))
            this.modalData.selected_ids = [];
            this.modalData.part = res.data.part;
            // 数据第一次通过接口获取
            this.modalData.get_first_data = false;
            this.modalData.part.forEach((element, index) => {
              // 选择不是附加项目的，
              if (!element.is_metal) {
                // 选择不是线条、或者基础档案中要默认为空的部件
                element.isBP = true;
                element.isChoosed = true;
                if (element.is_null == 1) {
                  element.change_id = "";
                } else {
                  element.part_detail = element.sub_part;
                  //展示非拆分部件
                  // 默认替换部件
                  element.change_id = element.change[0].id;
                  //存计算公式
                  element.long ? "" : (element.long = 0);
                  element.wide ? "" : (element.wide = 0);
                  element.high ? "" : (element.high = 0);
                  element.longCalc = JSON.parse(JSON.stringify(element.long));
                  element.wideCalc = JSON.parse(JSON.stringify(element.wide));
                  element.highCalc = JSON.parse(JSON.stringify(element.high));
                  element.part_detail.forEach((elem) => {
                    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.org_num = JSON.parse(JSON.stringify(elem.num));
                    elem.material_detail_org_num = JSON.parse(
                      JSON.stringify(elem.num || 0)
                    );
                    elem.material_detail_num = elem.num || 0;
                    elem.long ? "" : (elem.long = 0);
                    elem.wide ? "" : (elem.wide = 0);
                    elem.high ? "" : (elem.high = 0);
                    elem.longCalc = JSON.parse(JSON.stringify(elem.long || ""));
                    elem.wideCalc = JSON.parse(JSON.stringify(elem.wide || ""));
                    elem.highCalc = JSON.parse(JSON.stringify(elem.high || ""));
                    elem.material_detail_list.forEach((el) => {
                      el.long = el.long || "0";
                      el.wide = el.wide || "0";
                      el.high = el.high || "0";
                    });
                  });
                }
              }
            });
            //测量字段
            this.modalData.measure = res.data.measure;
            this.modalData.measure.forEach((element) => {
              element.value = "";
              element.measureCalc = JSON.parse(JSON.stringify(element.e_title));
            });
            //工艺属性
            this.modalData.process = [];
            this.axios({
              method: "get",
              url: "/api/bpp_list",
            }).then((re) => {
              re.data.forEach((element) => {
                for (const key in res.data.process.title) {
                  const ele = res.data.process.title[key];
                  if (element.name == ele) {
                    const compare = res.data.process.list.filter(
                      (item) => item.detail[key] == this.pre_process_obj[key]
                    );
                    this.modalData.procedure_properties = [];
                    if (compare.length > 0) {
                      this.modalData.procedure_properties.push(
                        this.pre_process_obj[key] * 1
                      );
                      this.modalData.process.push({
                        key: key,
                        title: ele,
                        value: this.pre_process_obj[key] * 1,
                        processList: element.cld,
                      });
                    } else {
                      this.modalData.procedure_properties.push("");
                      this.modalData.process.push({
                        key: key,
                        title: ele,
                        value: "",
                        processList: element.cld,
                      });
                    }
                  }
                }
              });
              this.modalData.part.forEach((element) => {
                if (!element.is_metal) {
                  //赋值默认工艺属性
                  element.process = JSON.parse(JSON.stringify(re.data));
                  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.procedure_property = this.pre_process_obj[key] * 1;
                        elem.process_id = key;
                        if (!element.procedure_properties) {
                          element.procedure_properties = [];
                        }
                        element.procedure_properties[index] =
                          this.pre_process_obj[key] * 1;
                      }
                    }
                  });
                }
              });
              this.handleClearExtInfo(
                this.modalData,
                this.pre_bp_id,
                res.data.bp_id
              );
              // 是否有上一个的工艺属性ID
              this.chooseLastRouteId(this.modalData, res);
              this.$forceUpdate();
            });
          }
        });
      }
    },
    chooseLastRouteId(modalData, res) {
      // 匹配
      modalData.process.forEach((element) => {
        for (const key in this.pre_process_obj) {
          const item = this.pre_process_obj[key];
          const compare = res.data.process.list.filter(
            (_process) => _process.detail[key] == this.pre_process_obj[key]
          );
          if (element.key == key) {
            if (compare.length > 0) {
              element.value = item * 1;
            } else {
              element.value = "";
            }
          }
        }
      });
      this.$forceUpdate();
    },
    changeProductOnEdit(row, n) {
      if (row) {
        this.modalData.type_name = row.label;
        this.modalData.title = row.label;
        this.axios("/api/order_get_product_detail_new", {
          params: {
            product_id: row.product_id,
            custom_id: this.info.custom_id,
          },
        }).then((res) => {
          if (res.code == 200) {
            this.support_remark = res.data.support_remark;
            this.process_match_list = res.data.process.list;
            this.process_all_list = res.data.process.title;
            //获取产品
            this.modalData.total_num = res.data.total_num || 1;
            this.modalData.ext_price = res.data.ext_price || 0;
            this.modalData.unit_price = res.data.price || 0;
            this.modalData.num = res.data.num || 1;
            this.modalData.num_temp_save = JSON.parse(
              JSON.stringify(res.data.num || 1)
            );
            this.modalData.over_price = res.data.over_price || 0;
            this.modalData.position = res.data.position | "";
            this.modalData.unit = res.data.unit || "";
            this.modalData.remark = res.data.remark || "";
            this.modalData.url = res.data.url || [];
            this.modalData.url_number = res.data.url_number || "";
            this.modalData.overdraft = res.data.overdraft;
            this.modalData.bp_id = res.data.bp_id;
            // this.modalData.same_process_compare = JSON.parse(JSON.stringify(res.data.intermediate.same_process || []))
            this.modalData.selected_ids = [];
            this.modalData.customize = row.customize;
            this.modalData.get_first_data = false;
            this.modalData.part = res.data.part;
            this.modalData.part.forEach((element) => {
              if (!element.is_metal) {
                element.isBP = true;
                element.isChoosed = true;
                element.part_detail = element.sub_part;
                // 数据第一次通过接口获取
                //展示非拆分部件
                //存计算公式
                element.longCalc = JSON.parse(
                  JSON.stringify(element.long || "")
                );
                element.wideCalc = JSON.parse(
                  JSON.stringify(element.wide || "")
                );
                element.highCalc = JSON.parse(
                  JSON.stringify(element.high || "")
                );
                element.part_detail.forEach((elem) => {
                  elem.org_num = JSON.parse(JSON.stringify(elem.num));
                  elem.material_detail_id = 0;
                  elem.material_detail_title =
                    elem.material_detail_list[0].title;
                  elem.material_detail_num = elem.num || 0;
                  elem.material_detail_org_num = JSON.parse(
                    JSON.stringify(elem.num || 0)
                  );
                  elem.longCalc = JSON.parse(JSON.stringify(elem.long || ""));
                  elem.wideCalc = JSON.parse(JSON.stringify(elem.wide || ""));
                  elem.highCalc = JSON.parse(JSON.stringify(elem.high || ""));
                  elem.material_detail_list.forEach((el) => {
                    el.long = el.long || "0";
                    el.wide = el.wide || "0";
                    el.high = el.high || "0";
                  });
                });
              }
            });
            //测量字段
            this.modalData.measure = res.data.measure;
            this.modalData.measure.forEach((element) => {
              element.measureCalc = JSON.parse(JSON.stringify(element.e_title));
            });
            //工艺属性
            this.modalData.process = [];
            this.axios({
              method: "get",
              url: "/api/bpp_list",
            }).then((re) => {
              this.modalData.part.forEach((element) => {
                if (!element.is_metal) {
                  element.process = JSON.parse(JSON.stringify(re.data));
                  element.process.forEach((elem) => {
                    elem.procedure_property = "";
                  });
                }
              });
              re.data.forEach((element) => {
                for (const key in res.data.process.title) {
                  const ele = res.data.process.title[key];
                  if (element.name == ele) {
                    element.cld.forEach((elem) => {
                      elem.isDisabled = false;
                    });
                    this.modalData.process.push({
                      key: key,
                      title: ele,
                      value: "",
                      processList: element.cld,
                    });
                  }
                }
              });
              (this.type == 2 || this.type == 3) &&
                this.getEditData(this.modalData, this.editForm);
              this.showEditProduct = true;
              this.$forceUpdate();
            });
          }
        });
      }
    },
    handlePartChange($event, row, measure, product_num) {
      if ($event) {
        let cur = row.change.filter((item) => item.id == row.change_id);
        row.part_title = cur[0].part_title;
        row.org_part_id = JSON.parse(JSON.stringify(row.part_id));
        row.part_id = cur[0].part_id;
        row.high = cur[0].high || 0;
        row.highCalc = JSON.parse(JSON.stringify(row.high));
        row.long = cur[0].long || 0;
        row.longCalc = JSON.parse(JSON.stringify(row.long));
        row.wide = cur[0].wide || 0;
        row.wideCalc = JSON.parse(JSON.stringify(row.wide));
        row.part_detail = cur[0].sub_part;
        row.part_detail.forEach((elem) => {
          elem.longCalc = JSON.parse(JSON.stringify(elem.long || ""));
          elem.wideCalc = JSON.parse(JSON.stringify(elem.wide || ""));
          elem.highCalc = JSON.parse(JSON.stringify(elem.high || ""));
          elem.org_num = JSON.parse(JSON.stringify(elem.num));
          elem.material_detail_org_num = JSON.parse(
            JSON.stringify(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;
        });
        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();
    },
    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();
    },
    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();
    },
    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();
    },
    handleGetProductMeasure(val, index, product, ele) {
      if (val) {
        let change = [];
        if (product.part.filter((v) => !v.change_id).length > 0) {
          ele.processList = [];
          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, value: item.value || "" };
        });
        ele.processList = [];
        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.processList = res.data;
          } else {
            ele.processList = [];
          }
          this.$forceUpdate();
        });
      }
    },
    // 查找最接近
    handleFindNearest(array, value) {
      const temp = JSON.parse(JSON.stringify(array));
      temp.sort((a, b) => {
        return Math.abs(a.long - value) - Math.abs(b.long - value);
      });
      return temp[0].material_detail_id;
    },
    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;
    },
    handleProductMeasureBlur(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);
              }
            }
          });
      });
      this.$forceUpdate();
    },
    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) => {
          if (!element.is_metal) {
            if (!element.is_null == 1) {
              //处理公式
              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) {
                element.high = JSON.parse(JSON.stringify(element.high));
              } else {
                element.high = eval(element.high);
                element.high += "";
              }
              if (flag_long) {
                element.long = JSON.parse(JSON.stringify(element.long));
              } else {
                element.long = eval(element.long);
                element.long += "";
              }
              if (flag_wide) {
                element.wide = JSON.parse(JSON.stringify(element.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) {
                  elem.high = JSON.parse(JSON.stringify(elem.high));
                } else {
                  elem.high = eval(elem.high);
                  elem.high += "";
                  elem.high == "null" && (elem.high = 0);
                }
                if (_flag_long) {
                  elem.long = JSON.parse(JSON.stringify(elem.long));
                } else {
                  elem.long = eval(elem.long);
                  elem.long += "";
                  elem.long == "null" && (elem.long = 0);
                }
                if (_flag_wide) {
                  elem.wide = JSON.parse(JSON.stringify(elem.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 = JSON.parse(JSON.stringify(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;
              }
              if (
                element.type == 2 &&
                item.wide > element.min &&
                item.wide < element.max
              ) {
                item.formula_temp = JSON.parse(JSON.stringify(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;
              }
              if (
                element.type == 3 &&
                item.high > element.min &&
                item.high < element.max
              ) {
                item.formula_temp = JSON.parse(JSON.stringify(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;
              }
            });
        });

        //修改核算数量
        // 如果没有核算数量公式，核算数量取产品数量
        if (product.num_formula == "") {
          product.total_num = product.num;
        } else {
          product.num_formula_temp = JSON.parse(
            JSON.stringify(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 = JSON.parse(JSON.stringify(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);
        }
        this.$forceUpdate();
      }
    },
    handleSubpartNumChange(e, row) {
      row.material_detail_num = e.target.value;
      this.$forceUpdate();
    },
    //修改材质/颜色/工艺的 disabled
    handleProductProcessChange(e, n, modelData, ele) {
      if (e) {
        this.pre_process_obj[n + 1] = e.value;
        if (!modelData.procedure_properties_str) {
          modelData.procedure_properties_str = [];
        }
        modelData.procedure_properties_str[ele.key - 1] = e.label;
        if (!modelData.procedure_properties) {
          modelData.procedure_properties = [];
        }
        modelData.procedure_properties[ele.key - 1] = e.value;
        let isStart = true;
        let match_list = []; //当前选中的list
        this.process_match_list.map((item) => {
          if (item.detail[ele.key] == e.value) {
            match_list.push(item.detail);
          }
        });
        this.process_Select_match_list = match_list;
        modelData.process.forEach((element) => {
          if (element.value == "") {
            isStart = false;
          }
        });
        //匹配工艺路线
        if (isStart) {
          let _target = [];
          let _sorce = JSON.parse(JSON.stringify(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.procedure_property = e.value;
                if (!element.procedure_properties) {
                  element.procedure_properties = [];
                }
                if (!element.procedure_properties_str) {
                  element.procedure_properties_str = [];
                }
                element.procedure_properties[n] = 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.key - 1] = "";
      }
      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;
        // row.material_detail_id = tempRow.length > 0 ? tempRow[0].id : 0
        this.$forceUpdate();
      }
    },
    handleRadioClick(row) {
      row.isChoosed = !row.isChoosed;
      this.$forceUpdate();
    },
    handlePartProcessChange(val, n, row) {
      if (!row.procedure_properties) {
        row.procedure_properties = [];
      }
      if (!row.procedure_properties_str) {
        row.procedure_properties_str = [];
      }
      if (val) {
        row.procedure_properties[n] = val.value;
        row.procedure_properties_str[n] = val.label;
      } else {
        row.procedure_properties[n] = "";
        row.procedure_properties_str[n] = "";
      }
      this.$forceUpdate();
    },
    looks(img) {
      const array = [{ img_url: img }];
      this.$previewImg({
        list: array,
        baseUrl: this.$store.state.ip,
        baseImgField: "img_url",
        baseTitleField: "",
      });
    },
    delItems(n, arr) {
      arr.splice(n, 1);
      this.$forceUpdate();
    },
    changeIpt(e, row) {
      if (this.info.img.length >= 3) {
        return this.$Message.warning("图片最多上传3张");
      }
      let file = e.target.files[0];
      this.postImg(file, row);
      e.target.value = null;
    },
    postImg(file, row) {
      let formData = new FormData();
      formData.append("file", file);
      this.axios.post("/api/upload_pic", formData).then((res) => {
        row.push(res.data.url);
        this.$forceUpdate();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.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: 120px;
    height: 120px;
    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: 120px;
    height: 120px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e7e7e7;
    margin-right: 10px;
    border-radius: 5px;
    position: relative;
    img {
      max-width: 108px;
      max-height: 108px;
    }
  }
}
.delete-img {
  position: absolute;
  right: 0px;
  top: 0px;
  color: red;
}
/deep/.ivu-tooltip-rel {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-edit {
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  top: 20px;
  height: 85%;
  padding-bottom: 20px;
  /deep/ .ivu-form-item {
    min-width: 300px;
  }
}
.auto-width {
  width: 200px;
}
.items {
  // box-shadow: 0 2px 7px rgba(0, 0, 0, 0.15);
  border-color: transparent;
  position: relative;
  border-radius: 5px;
  .items-header {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f4f4f4;
    .header-left {
      span {
        margin-left: 10px;
      }
    }
  }
  .form-item {
    padding: 20px;
  }
}
.modal-scroll {
  height: 600px;
  overflow: scroll;
}
.modal-items {
  border-radius: 5px;
  border: 1px solid #dedede;
  padding: 0px 10px;
  margin-bottom: 40px;
}
.modal-footer-button {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
}
.items-table {
  width: 100%;
  overflow-x: scroll;
}
/deep/ .ivu-table-wrapper {
  overflow: visible;
  color: red;
} //穿透iview
.original-part {
  padding-top: 20px;
}
.column-li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 5px;
}
.hierarchy {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  .radio-g {
    padding: 10px 0;
    width: 700px;
    display: flex;
    justify-content: flex-start;
    // align-items: flex-start;
    flex-wrap: wrap;
    .radio-us {
      background: #f4f5f7;
      padding: 5px 20px;
      margin-right: 18px;
      margin-bottom: 10px;
      color: #999999;
      border-radius: 15px;
      border: 1px solid #dedede;
      cursor: pointer;
    }
    .radio-us-foc {
      color: #3764ff;
      background: #fff;
      border: 1px solid #3764ff;
    }
  }
}
.nav-product {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
}
/deep/.ivu-poptip-inner {
  max-width: 90%;
  // display: flex;
  // justify-content: center;
}
/deep/.ivu-poptip-body {
  max-height: 600px;
  overflow: hidden;
  overflow-y: auto;
}

.content {
  .content_header {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }
}
.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;
      }
    }
  }
  .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;
    }
  }
}

/deep/.ivu-modal-body {
  max-height: 800px;
}
.hide_part_detail {
  display: none;
}
/deep/.ivu-form-item-content {
  span {
    vertical-align: middle;
  }
}
</style>