BST_bigScreen/src/views/BidSystem/ProductDeOrder/deorderdetail.vue

<template>
  <div class="BidSystemProductDeOrderDeorderdetail">
    <Toptitle :title="type == 1 ? '拆单编辑' : '拆单详情'">
      <slot name="titleButton">
        <Button
          @click="goback()"
          type="primary"
          ghost
          style="margin-right: 10px"
          >返回</Button
        >
        <Button
          @click="postData()"
          type="primary"
          v-if="type == 1"
          ghost
          style="margin-right: 10px"
          >保存</Button
        >
      </slot>
    </Toptitle>
    <div class="top_info">
      <div><span>产品名称:</span>{{ formData.title }}</div>
      <div><span>计量单位:</span>{{ formData.unit }}</div>
      <div><span>数量:</span>{{ formData.num }}</div>
      <!-- <div><span>价格:</span>{{ formData.price }}</div> -->
      <div><span>规格:</span>{{ formData.measure }}</div>
      <div style="width:auto">
        <span>工艺属性:</span>{{ formData.process_property }}
      </div>
      <div style="overflow:hidden;">
        <span>图纸:</span>
        <div>
          <span
            v-for="item in formData.url"
            :key="item"
            @click="checkImg(formData.url)"
          >
            <img :src="$store.state.ip + item" alt="" />
          </span>
        </div>
      </div>
      <div><span>图号:</span>{{ formData.url_number }}</div>
      <div><span>备注:</span>{{ formData.remark }}</div>
    </div>
    <div class="similar_product">
      <!-- <div>
        <span>价格:</span>
        <Input
          type="text"
          size="small"
          :disabled="type == 2"
          v-model="formData.real_price"
          style="width: 150px; margin-right: 10px"
          placeholder="请输入价格"
        />
      </div> -->
      <div>
        <span>型号:</span>
        <Input
          type="text"
          size="small"
          :disabled="type == 2"
          v-model="formData.model"
          style="width: 150px; margin-right: 10px"
          placeholder="请输入型号"
        />
      </div>
      <div>
        <div
          style="
            display: flex;
            align-items: center;
            width: 100%;
            margin-right: 10px;
          "
        >
          <Dropdown>
            <a :disabled="type == 2">选择产品分类</a>
            <DropdownMenu slot="list">
              <Downtree
                @childByValue="handleClick"
                :parent="productTypes"
              ></Downtree>
            </DropdownMenu>
          </Dropdown>
          <a
            :disabled="type == 2"
            style="margin-left: 20px"
            v-if="nowSelectObj.title"
            >{{ nowSelectObj.title || "" }}</a
          >
        </div>
      </div>
      <Button
        @click="handleSimilarProductShow"
        type="primary"
        :disabled="type == 2"
        style="margin-right: 10px"
        >选择相似产品</Button
      >
    </div>
    <div
      class="parts"
      v-for="(partsItem, partsIndex) in formData.parts"
      :key="partsIndex"
    >
      <div class="parts_title">
        <h2>部件{{ partsIndex + 1 }}</h2>
        <div>
          <Button
            @click="handlePartAdd(partsItem, partsIndex)"
            type="success"
            size="small"
            :disabled="type == 2"
            style="margin-right: 10px"
            >新增部件</Button
          >
          <Button
            @click="handlePartCopy(partsItem, partsIndex)"
            type="primary"
            :disabled="type == 2"
            size="small"
            style="margin-right: 10px"
            >复制部件</Button
          >
          <Button
            @click="handlePartDele(partsItem, partsIndex)"
            v-show="formData.parts.length > 1"
            type="error"
            :disabled="type == 2"
            size="small"
            style="margin-right: 10px"
            >删除部件</Button
          >
        </div>
      </div>
      <div class="parts_top">
        <Form :model="partsItem" :label-width="100">
          <FormItem label="部件分类名称:">
            <Select
              v-model="partsItem.parts_type"
              size="small"
              clearable
              filterable
              :disabled="type == 2"
              @on-change="(e) => handlePartsSelect(e, partsItem)"
              style="width: 150px"
            >
              <Option
                v-for="sitem in partsList"
                :key="sitem.id"
                :label="sitem.title"
                :value="sitem.id"
              >
              </Option>
            </Select>
          </FormItem>
          <FormItem label="标签:">
            <RadioGroup v-model="partsItem.pay_state" size="small">
              <Radio :label="1" :disabled="type == 2">是</Radio>
              <Radio :label="0" :disabled="type == 2">否</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="部件名称:">
            <Select
              v-model="partsItem.part_id"
              size="small"
              clearable
              filterable
              allow-create
              label-in-value
              :disabled="type == 2"
              @on-create="(e) => handlePartTitleCreate(partsItem, e)"
              @on-change="(e) => handlePartsNameSelect(partsItem, e)"
              style="width: 150px"
            >
              <Option
                v-for="sitem in partsItem.partsNameList"
                :key="sitem.id"
                :label="sitem.title"
                :value="sitem.id"
              >
              </Option>
            </Select>
          </FormItem>
          <FormItem label="单位:">
            <Input
              type="text"
              size="small"
              :disabled="type == 2"
              v-model="partsItem.company"
              style="width: 150px"
              placeholder="请输入单位"
            />
          </FormItem>
          <!-- <FormItem label="工艺价格:">
            <Input
              type="text"
              size="small"
              :disabled="!partsItem.isAddProcessRoute || type == 2"
              v-model="partsItem.process_price"
              style="width: 150px"
              placeholder="请输入工艺价格"
            />
          </FormItem> -->
          <FormItem label="高:">
            <Input
              type="text"
              size="small"
              @on-search="openKey(partsIndex, -1, 'long', partsItem)"
              :disabled="type == 2"
              v-model="partsItem.long"
              style="width: 150px"
              placeholder="请输入高"
              search
              enter-button="公式"
            />
          </FormItem>
          <FormItem label="宽:">
            <Input
              type="text"
              size="small"
              @on-search="openKey(partsIndex, -1, 'wide', partsItem)"
              :disabled="type == 2"
              v-model="partsItem.wide"
              style="width: 150px"
              placeholder="请输入宽"
              search
              enter-button="公式"
            />
          </FormItem>
          <FormItem label="厚:">
            <Input
              type="text"
              size="small"
              @on-search="openKey(partsIndex, -1, 'thick', partsItem)"
              :disabled="type == 2"
              v-model="partsItem.thick"
              style="width: 150px"
              placeholder="请输入厚"
              search
              enter-button="公式"
            />
          </FormItem>
          <FormItem label="产值比例(%):">
            <Input
              type="text"
              size="small"
              :disabled="type == 2"
              @on-blur="(e) => handleProportionEdit(e, partsItem, partsIndex)"
              v-model="partsItem.proportion"
              style="width: 150px"
              placeholder="请输入产值比"
            />
          </FormItem>
          <FormItem
            v-for="item of partsItem.ProcessAttrList"
            :key="item.id"
            :label="(item.name || item.title) + ':'"
          >
            <Select
              v-model="item.selected_value"
              size="small"
              clearable
              filterable
              :disabled="type == 2"
              @on-change="(e) => handleProcessSelect(partsItem, e)"
              style="width: 150px"
            >
              <OptionGroup
                v-for="OptionGroup in item.cld"
                :key="OptionGroup.type_title"
                :label="OptionGroup.type_title"
              >
                <Option
                  v-for="Option in OptionGroup.list"
                  :value="Option.id"
                  :key="Option.id"
                  >{{ Option.title }}</Option
                >
              </OptionGroup>
              <Option
                v-for="sitem in item.partsNameList"
                :key="sitem.id"
                :label="sitem.title"
                :value="sitem.id"
              >
              </Option>
            </Select>
          </FormItem>
        </Form>
      </div>
      <div class="parts_content">
        <!-- <span>工艺属性:</span>
        <div
          class="hierarchy"
          v-for="(item, index) of partsItem.ProcessAttrList"
          :key="item.id"
        >
          <span>{{ item.name || item.title }}(单选)：</span>
          <div
            v-for="_item in item.cld"
            class="radio-g"
            :key="_item.type_title"
          >
            <div class="tit_box">
              <span :class="['box-us']" @click="setBoxChange(item, _item)">{{
                _item.type_title
              }}</span>
            </div>
            <div class="radio-box">
              <div
                v-for="__item in _item.list"
                @click="
                  setRadioChange(_item, __item, index, partsItem, item.cld)
                "
                :class="['radio-us', __item.show ? 'radio-us-foc' : '']"
                :key="__item.id"
              >
                {{ __item.title }}
              </div>
            </div>
          </div>
        </div> -->
        <div style="display:flex;justify-content: space-between;">
          <div style="padding: 10px 0">
            <span>工艺路线：</span>
            <Button
              :disabled="type == 2"
              @click="editRouter(partsItem, partsIndex)"
              >选择工艺路线</Button
            >
            {{ partsItem.process_name }}
          </div>
          <div style="padding: 10px 0">
            <Button
              type="primary"
              @click="handleProcessLineShow(partsItem, partsIndex)"
              >{{ partsItem.isShowProcessLine ? "收起" : "展开" }}</Button
            >
          </div>
        </div>

        <div class="parts_content_lineTable">
          <Table
            :columns="partsProcessLineColumns"
            border
            :data="partsItem.partsProcessLineTableData"
          >
            <template slot="timeSlot" slot-scope="{ index }">
              <Input
                v-model="partsItem.partsProcessLineTableData[index].time"
              />
            </template>
            <template slot="wagesSlot" slot-scope="{ index }">
              <Input
                v-model="partsItem.partsProcessLineTableData[index].wages"
              />
            </template>
            <template slot="capacitySlot" slot-scope="{ index }">
              <Input
                v-model="partsItem.partsProcessLineTableData[index].capacity"
              />
            </template>
          </Table>
        </div>
        <div class="parts_content_part">
          <span>零部件添加</span>
          <Button
            @click="handlePartWoodAdd(partsIndex)"
            type="primary"
            size="small"
            ghost
            :disabled="type == 2"
            style="margin-right: 10px"
            >新增木板</Button
          >
        </div>
        <div class="parts_content_partTable">
          <Table
            :columns="partsPartColumns"
            border
            :data="partsItem.partsWoodTableData"
          >
            <template slot-scope="{ index }" slot="partNameSet">
              <Input
                placeholder="名称"
                :disabled="type == 2"
                v-model="partsItem.partsWoodTableData[index].spare_parts"
              />
            </template>
            <template slot-scope="{ row, index }" slot="partSpare_partsSet">
              <div>
                <Select
                  filterable
                  clearable
                  :disabled="type == 2"
                  label-in-value
                  @on-change="changeSe($event, index, partsIndex, row)"
                  v-model="partsItem.partsWoodTableData[index].material_id"
                >
                  <Option
                    :data-unit="item.unit"
                    :tag="item.high"
                    v-for="item of materialWoodList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.title"
                  ></Option>
                </Select>
              </div>
            </template>
            <template slot-scope="{ index }" slot="partNumberSet">
              <Input
                placeholder="数量"
                :disabled="type == 2"
                v-model="partsItem.partsWoodTableData[index].number"
              />
            </template>

            <template slot-scope="{ index }" slot="partWoolLongSet">
              <Input
                @on-search="openKey(partsIndex, index, 'wool_long', partsItem)"
                :disabled="type == 2"
                placeholder="毛料高"
                search
                enter-button="公式"
                v-model="partsItem.partsWoodTableData[index].wool_long"
              />
            </template>
            <template slot-scope="{ index }" slot="partWoolWideSet">
              <Input
                @on-search="openKey(partsIndex, index, 'wool_wide', partsItem)"
                :disabled="type == 2"
                placeholder="毛料宽"
                search
                enter-button="公式"
                v-model="partsItem.partsWoodTableData[index].wool_wide"
              />
            </template>
            <template slot-scope="{ index }" slot="partLongSet">
              <Input
                @on-search="openKey(partsIndex, index, 'long', partsItem)"
                :disabled="type == 2"
                placeholder="精裁高"
                search
                enter-button="公式"
                v-model="partsItem.partsWoodTableData[index].long"
              />
            </template>
            <template slot-scope="{ index }" slot="partWideSet">
              <Input
                @on-search="openKey(partsIndex, index, 'wide', partsItem)"
                :disabled="type == 2"
                placeholder="精裁宽"
                search
                enter-button="公式"
                v-model="partsItem.partsWoodTableData[index].wide"
              />
            </template>
            <template slot-scope="{ index }" slot="partRequirementSet">
              <Select
                placeholder="工艺要求"
                filterable
                clearable
                :disabled="type == 2"
                v-model="
                  partsItem.partsWoodTableData[index]
                    .technological_requirement_id
                "
              >
                <Option
                  v-for="item in processRequireList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.title"
                ></Option>
              </Select>
            </template>
            <template slot-scope="{ index }" slot="partSub_numSet">
              <Select
                placeholder="贴面数"
                filterable
                clearable
                :disabled="type == 2"
                v-model="partsItem.partsWoodTableData[index].sub_num"
              >
                <Option :value="0" label="0"></Option>
                <Option :value="1" label="1"></Option>
                <Option :value="2" label="2"></Option>
              </Select>
            </template>
            <template slot-scope="{ index }" slot="partVeneer_idSet">
              <Select
                placeholder="贴木皮"
                filterable
                clearable
                :disabled="type == 2"
                v-model="partsItem.partsWoodTableData[index].veneer_id"
              >
                <Option
                  v-for="item in materialWoodSkinList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.title"
                ></Option>
              </Select>
            </template>
            <template slot-scope="{ index }" slot="partPaint_idSet">
              <Select
                placeholder="油漆"
                filterable
                clearable
                :disabled="type == 2"
                v-model="partsItem.partsWoodTableData[index].paint_id"
              >
                <Option
                  v-for="item in materialPaintList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.title"
                ></Option>
              </Select>
            </template>
            <template slot-scope="{ index }" slot="partLabelSet">
              <Select
                placeholder="标签"
                filterable
                clearable
                :disabled="type == 2"
                v-model="partsItem.partsWoodTableData[index].label"
              >
                <Option :value="1" label="小芯片"></Option>
                <Option :value="2" label="大芯片"></Option>
                <Option :value="3" label="否"></Option>
                <Option :value="4" label="标签"></Option>
              </Select>
            </template>
            <template slot-scope="{ index }" slot="partPrint_numSet">
              <Input
                placeholder="打印数量"
                :disabled="type == 2"
                v-model="partsItem.partsWoodTableData[index].print_num"
              />
            </template>
            <template slot="partSet" slot-scope="{ row, index }">
              <a
                style="margin: 0 5px"
                :disabled="type == 2"
                @click="handlePartWoodCopy(row, index, partsIndex)"
                >复制</a
              >
              <a
                :style="
                  type == 2
                    ? 'margin: 0 5px; color: #ccc'
                    : 'margin: 0 5px; color: red'
                "
                :disabled="type == 2"
                @click="handlePartWoodDele(row, index, partsIndex)"
                >删除</a
              >
            </template>
          </Table>
        </div>
        <div class="parts_content_metals">
          <Button
            @click="handlePartMetalsAdd(partsIndex)"
            type="primary"
            size="small"
            :disabled="type == 2"
            ghost
            style="margin-right: 10px"
            >新增五金</Button
          >
        </div>
        <div class="parts_content_metalsTable">
          <Table
            :columns="partsMetalseColunms"
            border
            :data="partsItem.partsMetalseData"
          >
            <template slot="metalSpare_partsSet" slot-scope="{ index }">
              <Select
                filterable
                clearable
                :disabled="type == 2"
                @on-change="changeMetal($event, index, partsIndex)"
                label-in-value
                placeholder="请选择"
                v-model="partsItem.partsMetalseData[index].material_id"
              >
                <Option
                  v-for="item in metalsList"
                  :key="item.id"
                  :data-unit="item.unit"
                  :value="item.id"
                  :label="item.title"
                ></Option>
              </Select>
            </template>
            <template slot-scope="{ index }" slot="metalNumberSet">
              <Input
                placeholder="数量"
                :disabled="type == 2"
                v-model="partsItem.partsMetalseData[index].number"
              />
            </template>
            <template slot-scope="{ index }" slot="metalPriceSet">
              <Input
                placeholder="单价"
                :disabled="type == 2"
                v-model="partsItem.partsMetalseData[index].price"
              />
            </template>
            <template slot="metalTotal_priceSet" slot-scope="{ row }">
              {{ row.number * row.price }}
            </template>
            <template slot="metalsSet" slot-scope="{ row, index }">
              <a
                style="margin: 0 5px"
                :disabled="type == 2"
                @click="handlePartMetalsCopy(row, index, partsIndex)"
                >复制</a
              >
              <a
                :style="
                  type == 2
                    ? 'margin: 0 5px; color: #ccc'
                    : 'margin: 0 5px; color: red'
                "
                :disabled="type == 2"
                @click="handlePartMetalsDele(row, index, partsIndex)"
                >删除</a
              >
            </template>
          </Table>
        </div>
      </div>
    </div>
    <li v-for="item in formData.parts" v-show="false" :key="item.id"></li>
    <!-- 相似产品弹窗 -->
    <el-dialog
      title="选择相似产品"
      :visible.sync="showSimilarProductModal"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="similarProductModal"
      width="1000px"
      :before-close="handleClose"
    >
      <Form :label-width="100" :model="similarProductData">
        <FormItem label="产品分类">
          <el-cascader
            clearable
            v-model="similarProductData.type_id"
            size="small"
            style="width: 120px"
            :show-all-levels="false"
            :options="PDTTypeList"
            :props="{
              expandTrigger: 'hover',
              children: 'child',
              value: 'id',
              label: 'title',
              checkStrictly: true,
              emitPath: false,
            }"
          ></el-cascader>
          <!-- <Select
            v-model="similarProductData.type_name"
            placeholder="请选择"
            style="width: 120px"
            size="small"
          >
            <Option
              v-for="item in PDTTypeList"
              :value="item.title"
              :key="item.title"
              :label="item.title"
            ></Option>
          </Select> -->
        </FormItem>
        <FormItem label="产品名称:">
          <Input
            type="text"
            size="small"
            clearable
            v-model="similarProductData.title"
            style="width: 120px"
          />
        </FormItem>
        <FormItem label="产品型号">
          <Input
            type="text"
            size="small"
            clearable
            v-model="similarProductData.model"
            placeholder="请输入"
            style="width: 120px"
          />
        </FormItem>
        <FormItem label="图号:">
          <Input
            type="text"
            size="small"
            clearable
            v-model="similarProductData.url_number"
            style="width: 120px"
          />
        </FormItem>
        <Button
          type="primary"
          style="margin: 0 10px"
          @click="handleSimilarProductSearch"
          >搜索</Button
        >
      </Form>
      <Table
        :columns="similarProductColunms"
        border
        highlight-row
        :disabled-hover="true"
        @on-current-change="handleSimilarProductSelected"
        :loading="similarProductLoading"
        :data="similarProductData.similarProductList"
      >
      </Table>
      <div class="page">
        <Page
          @on-change="changeSimilarProductPage"
          :current="similarProductData.page_index"
          show-total
          :total="similarProductData.total"
          size="small"
          :page_size="similarProductData.page_size"
        />
      </div>
      <div class="modal-footer" slot="footer">
        <Button
          style="margin-right:10px"
          @click="showSimilarProductModal = false"
          >取消</Button
        >
        <Button
          type="primary"
          @click="handleSimilarProductConfirm(tempSimilarProductData.id)"
          >确认</Button
        >
      </div>
    </el-dialog>
    <!-- 选择工艺路线弹窗 -->
    <Modal
      class-name="vertical-center-modal"
      v-model="showProcessLineModal"
      title="选择工艺路线"
    >
      <div class="modal_process_route">
        <div class="modal_process_route_top">
          <div>
            <span>工艺路线名称:</span>
            <Input
              v-model="tempProcessLine.title"
              style="width: 120px"
              placeholder="请输入"
            />
          </div>
          <Button
            type="primary"
            @click="handleSearchProcessLine(tempProcessLine.title)"
            >搜索</Button
          >
        </div>
        <div class="modal_process_route_content">
          <Table
            border
            :columns="processLineColumns"
            :data="processLineTableData"
          >
            <template slot="processLineSet" slot-scope="{ row, index }">
              <a style="margin: 0 5px" @click="handleProcessLineSet(row, index)"
                >选择</a
              >
            </template>
          </Table>
        </div>
      </div>
    </Modal>
    <Modal
      class-name="vertical-center-modal vertical-center-modal1"
      v-model="showProcessLineDetailModal"
      width="80%"
      :mask-closable="false"
      title="工艺路线"
    >
      <div class="modal_process_route modal_process_route1">
        <div>
          <span style="width: 100px">id: </span
          ><Input
            v-model="info.id"
            disabled
            placeholder="自动生成"
            style="width: 150px"
            size="small"
          />
        </div>
        <div>
          <span style="width: 100px">工艺路线名称: </span
          ><Input
            v-model="info.title"
            placeholder="请输入工艺路线名称"
            size="small"
            style="width: 250px"
          />
        </div>
      </div>
      <div class="modal_content">
        <div class="modal_content_left">
          <span>已选：</span>
          <SlickList
            :distance="10"
            :lockToContainerEdges="true"
            axis="x,y,xy"
            lockAxis="xy"
            v-model="selectTags"
            class="SortableList"
            @input="getChangeLists"
          >
            <SlickItem
              style="z-index: 9999"
              v-for="(item, key) of selectTags"
              :key="key"
              class="SortableItem"
              :index="key"
            >
              <Tooltip>
                <div slot="content">
                  <p>工时：{{ item.time }}</p>
                  <p>工价：{{ item.wages }}</p>
                  <p>产能：{{ item.capacity }}</p>
                </div>
                <div class="tag-modal">
                  <div class="before">{{ key + 1 }}</div>
                  <Tag
                    @on-close="closeTag(key, selectTags, item)"
                    color="primary"
                    type="border"
                    closable
                    >{{ item.title }}</Tag
                  >
                </div>
              </Tooltip>
            </SlickItem>
          </SlickList>
        </div>
        <div class="modal_content_right">
          <div v-for="(item, index) of info.bps" :key="index">
            <div v-if="item.cld && item.cld.length > 0">
              <span style="font-weight:bold">{{ item.title }}</span>
              <div
                style="display: flex;justify-content: flex-start;flex-wrap: wrap;"
              >
                <div
                  v-for="(_item, _index) in item.cld"
                  :key="_index"
                  :style="
                    _item.p_id
                      ? [{ 'margin-left': '10px' }]
                      : [{ 'margin-left': '10px' }, { width: '100%' }]
                  "
                >
                  <div v-if="_item.cld && _item.cld.length > 0">
                    <div>
                      <div style="font-weight:bold;width:100%">
                        {{ _item.title }}:
                      </div>
                      <div
                        style="display: flex;justify-content: flex-start;flex-wrap: wrap;"
                      >
                        <div
                          v-for="(__item, __index) in _item.cld"
                          :key="__index"
                          :style="
                            __item.p_id
                              ? [{ 'margin-left': '10px' }]
                              : [{ 'margin-left': '10px' }, { width: '100%' }]
                          "
                        >
                          <div v-if="__item.cld && __item.cld.length > 0">
                            <span style="font-weight:bold"
                              >{{ __item.title }}:</span
                            >
                            <div
                              style="display: flex;justify-content: flex-start;flex-wrap: wrap;"
                            >
                              <Tooltip
                                v-for="(___item, ___index) of __item.cld"
                                :key="___index"
                              >
                                <div slot="content">
                                  <p>工时：{{ ___item.time }}</p>
                                  <p>工价：{{ ___item.wages }}</p>
                                  <p>产能：{{ ___item.capacity }}</p>
                                </div>
                                <Checkbox
                                  @on-change="
                                    changeCheck($event, ___item, selectTags)
                                  "
                                  v-model="___item.show"
                                  style="padding: 0px 5px"
                                  >{{ ___item.title }}</Checkbox
                                >
                              </Tooltip>
                            </div>
                          </div>
                          <div v-else>
                            <Tooltip v-if="__item.p_id">
                              <div slot="content">
                                <p>工时：{{ __item.time }}</p>
                                <p>工价：{{ __item.wages }}</p>
                                <p>产能：{{ __item.capacity }}</p>
                              </div>
                              <Checkbox
                                @on-change="
                                  changeCheck($event, __item, selectTags)
                                "
                                v-model="__item.show"
                                style="padding: 0px 5px"
                                >{{ __item.title }}</Checkbox
                              >
                            </Tooltip>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-else>
                    <Tooltip v-if="_item.p_id">
                      <div slot="content">
                        <p>工时：{{ _item.time }}</p>
                        <p>工价：{{ _item.wages }}</p>
                        <p>产能：{{ _item.capacity }}</p>
                      </div>
                      <Checkbox
                        @on-change="changeCheck($event, _item, selectTags)"
                        v-model="_item.show"
                        style="padding: 0px 5px"
                        >{{ _item.title }}</Checkbox
                      >
                    </Tooltip>
                    <!-- <span v-else>{{ _item.title }}</span> -->
                  </div>
                </div>
              </div>
            </div>
            <!-- <div v-else>{{ item.title }}</div> -->
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button
          @click="
            showProcessLineDetailModal = false;
            showProcessLineModal = true;
          "
          type="primary"
          ghost
          >取消</Button
        >
        <Button @click="saveTableData()" type="primary">确定</Button>
      </div>
    </Modal>
    <!-- 输入框弹窗 -->
    <Modal
      v-model="showKey"
      :width="1250"
      :mask-closable="false"
      :closable="false"
    >
      <div>
        <KeyBoard
          :rightData="measureList"
          :showValue="KeyBoardValue"
          @cancel="cancelKey"
          @success="successKey"
          class="key-co"
        />
      </div>
      <div slot="footer"></div>
    </Modal>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { SlickList, SlickItem } from "vue-slicksort";
import KeyBoard from "../../../components/keyboard/index";
import Downtree from "../../../components/drowDown/index";

export default {
  name: "BidSystemProductDeOrderDeorderdetail",
  components: {
    SlickList,
    SlickItem,
    KeyBoard,
    Downtree,
  },
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      // 1拆单 2详情
      type: this.$route.query.type,
      formData: {
        title: "", //产品名称
        num: "", //数量
        // price: "", //价格
        measure: "", //规格
        process_property: "", //工艺属性
        url: [], //图纸
        url_number: "", //图号
        remark: "", //备注
        parts: [
          //产品列表
          {
            isAddPart: true, //是否为新增部件
            long: "",
            width: "",
            thick: "",
            parts_type: "", //部件分类名称
            pay_state: "", //标签
            part_id: "", //部件名称
            company: "", //单位
            processCombination: "", //工艺组合名称
            process_price: "", //工艺价格
            proportion: "", //产值比例
            properties: [], //工艺属性
            ProcessAttrList: [
              {
                id: "",
                cld: [{ id: "", title: "" }],
              },
            ], //工艺属性列表
            partsProcessLineTableData: [
              // {
              //   id: '',
              //   type: '',
              //   title: '',
              //   time: '',
              //   wages: '',
              //   capacity: '',
              // }
            ], //工艺路线表格
            partsWoodTableData: [
              {
                title: "",
                spare_parts: "",
                number: "",
                company: "",
                long: "",
                wool_long: "",
                wide: "",
                wool_wide: "",
                thick: "",
                technological_requirement_id: "",
                sub_num: "",
                veneer_id: "",
                paint_id: "",
                label: "",
                print_num: "",
              },
            ], //木板表格
            partsMetalseData: [], //五金表格
            partsNameList: [{ id: "", title: "" }], //部件名称列表
            partsProcessRouteList: [{ id: "", title: "" }], //工艺组合名称列表
            checkBox: [],
          },
        ],
      },
      tempProcessLine: {
        title: "",
      },
      processLineTableData: [],
      processRouteId: "",
      processRouteName: "",
      partsProcessLineColumns: [
        { title: "序号", type: "index", minWidth: 30, align: "center" },
        { title: "工序名称", key: "title", align: "center" },
        { title: "工时", key: "time", align: "center", slot: "timeSlot" },
        { title: "工价", key: "wages", align: "center", slot: "wagesSlot" },
        {
          title: "产能",
          key: "capacity",
          align: "center",
          slot: "capacitySlot",
        },
      ], //工艺路线表头
      partsPartColumns: [
        {
          title: "名称",
          key: "spare_parts",
          align: "center",
          minWidth: 120,
          slot: "partNameSet",
        },
        {
          title: "木板",
          key: "title",
          align: "center",
          minWidth: 120,
          slot: "partSpare_partsSet",
        },
        {
          title: "数量",
          key: "number",
          align: "center",
          minWidth: 100,
          slot: "partNumberSet",
        },
        { title: "单位", key: "company", align: "center", minWidth: 80 },
        {
          title: "毛料高",
          key: "wool_long",
          align: "center",
          minWidth: 180,
          slot: "partWoolLongSet",
        },
        {
          title: "毛料宽",
          key: "wool_wide",
          align: "center",
          minWidth: 180,
          slot: "partWoolWideSet",
        },
        {
          title: "精裁高",
          key: "long",
          align: "center",
          minWidth: 180,
          slot: "partLongSet",
        },
        {
          title: "精裁宽",
          key: "wide",
          align: "center",
          minWidth: 180,
          slot: "partWideSet",
        },
        { title: "厚", key: "thick", align: "center", minWidth: 120 },
        {
          title: "工艺要求",
          key: "technological_requirement_id",
          align: "center",
          minWidth: 140,
          slot: "partRequirementSet",
        },
        {
          title: "贴面数",
          key: "sub_num",
          align: "center",
          minWidth: 120,
          slot: "partSub_numSet",
        },
        {
          title: "贴木皮名称",
          key: "veneer_id",
          align: "center",
          minWidth: 140,
          slot: "partVeneer_idSet",
        },
        {
          title: "油漆组合",
          key: "paint_id",
          align: "center",
          minWidth: 140,
          slot: "partPaint_idSet",
        },
        {
          title: "标签",
          key: "label",
          align: "center",
          minWidth: 120,
          slot: "partLabelSet",
        },
        {
          title: "打印数量",
          key: "print_num",
          align: "center",
          minWidth: 100,
          slot: "partPrint_numSet",
        },
        {
          title: "操作",
          key: "name",
          align: "center",
          slot: "partSet",
          fixed: "right",
          minWidth: 140,
        },
      ], //零部件表头
      processLineColumns: [
        { title: "ID", align: "center", key: "id" },
        { title: "工艺路线名称", align: "center", key: "title" },
        { title: "操作", align: "center", key: "id", slot: "processLineSet" },
      ],
      partsMetalseColunms: [
        {
          title: "五金",
          key: "material_id",
          align: "center",
          minWidth: 80,
          slot: "metalSpare_partsSet",
        },
        {
          title: "数量",
          key: "number",
          align: "center",
          minWidth: 80,
          slot: "metalNumberSet",
        },
        { title: "单位", key: "company", align: "center", minWidth: 80 },
        {
          title: "单价",
          key: "price",
          align: "center",
          minWidth: 80,
          slot: "metalPriceSet",
        },
        {
          title: "总价",
          key: "total_price",
          align: "center",
          minWidth: 80,
          slot: "metalTotal_priceSet",
        },
        {
          title: "操作",
          key: "name",
          align: "center",
          minWidth: 80,
          slot: "metalsSet",
        },
      ], //五金表头
      showSimilarProductModal: false,
      similarProductLoading: false,
      PDTTypeList: [{ id: "", title: "" }], //产品分类列表
      ProcessAttrList: [], //工艺属性列表
      partsList: [{ id: "", title: "" }], //部件分类名称列表
      similarProductData: {
        type_id: "",
        title: "",
        model: "",
        url_number: "",
        similarProductList: [
          {
            type: "",
            title: "",
            model: "",
            url_number: "",
          },
        ],
        page_index: 1,
        page_size: 10,
        total: 0,
      },
      similarProductColunms: [
        {
          title: "选择",
          key: "",
          align: "center",
          minWidth: 60,
          render: (h, params) => {
            let id = params.row.id;
            let flag = false;
            if (this.tempSimilarProductData.id == id) {
              flag = true;
            } else {
              flag = false;
            }
            let self = this;
            return h("div", [
              h("Radio", {
                props: {
                  value: flag,
                },
                on: {
                  "on-change": () => {
                    self.tempSimilarProductData = params.row;
                  },
                },
              }),
            ]);
          },
        },
        { title: "产品分类", key: "type_name", align: "center", minWidth: 80 },
        { title: "产品名称", key: "title", align: "center", minWidth: 80 },
        { title: "产品型号", key: "model", align: "center", minWidth: 80 },
        { title: "图号", key: "url_number", align: "center", minWidth: 80 },
      ],
      processLineData: {
        title: "",
        processLineList: [
          {
            id: "",
            title: "",
          },
        ],
        page_index: 1,
        page_size: 10,
        total: 0,
      },
      processLineColunms: [
        { title: "ID", key: "name", align: "center", minWidth: 80 },
        { title: "工艺路线名称", key: "name", align: "center", minWidth: 80 },
        {
          title: "操作",
          key: "name",
          align: "center",
          minWidth: 80,
          slot: "processLineSet",
        },
      ],
      showProcessLineModal: false,
      showProcessLineDetailModal: false,
      showKey: false,
      processLineLoading: false,
      tempSimilarProductData: {},
      tempProcessLineData: {},
      order_no: this.$route.query.order_no,
      orders_area_product_detail_id: this.$route.query
        .orders_area_product_detail_id,
      selectTags: [], //已选列表
      info: {
        title: "",
        price: "",
        parts_id: "",
        id: null,
        properties: [], //工序号
        procedure: [], //工艺属性id
        ProcessAttrList: [],
        bps: [],
      },
      tempSelectedPartIndex: 0,
      // 工艺属性暂存
      tempProcessAttrList: [],
      // 输入框弹窗
      measureList: [
        // { e_title: 'H', title: '高', id: 1, sort: 0 },
        // { e_title: 'W', title: '宽', id: 1, sort: 0 },
        // { e_title: 'D', title: '深', id: 1, sort: 0 },
      ],
      KeyBoardValue: "",
      attrIndex: "",
      attrName: "",
      materialWoodList: [], // 木板列表
      processRequireList: [], // 工艺要求列表
      materialWoodSkinList: [], // 木皮列表
      materialPaintList: [], // 油漆列表
      metalsList: [], // 五金列表
      productTypes: [],
      nowSelectObj: {},
      temp_info_bps: [],
      process_name: "",
      // 判断工艺路线是否新增
      isNewProcess: false,
    };
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取产品分类
    this.axios("/api/parts_product_list").then((res) => {
      this.productTypes = res.data;
    });
    this.axios("/api/bp_list").then((res) => {
      this.info.bps = res.data;
      for (const key in this.info.bps) {
        const element = this.info.bps[key];
        element.cld &&
          element.cld.length > 0 &&
          element.cld.forEach((z) => {
            z.show = false;
            z.cld &&
              z.cld.length > 0 &&
              z.cld.forEach((elem) => {
                elem.show = false;
                elem.cld &&
                  elem.cld.length > 0 &&
                  elem.cld.forEach((el) => {
                    el.show = false;
                  });
              });
          });
      }
      this.temp_info_bps = JSON.parse(JSON.stringify(this.info.bps));
    });
    this.axios("/api/bpp_list_new").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.tempProcessAttrList = JSON.parse(JSON.stringify(res.data));
      this.formData.parts.forEach((element) => {
        element.ProcessAttrList = JSON.parse(JSON.stringify(res.data));
      });
    });
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 获取产品分类列表
    this.axios("/api/parts_product_list").then((res) => {
      this.PDTTypeList = res.data;
    });
    // 获取工艺要求列表
    this.axios("/api/technological_requirement").then((res) => {
      this.processRequireList = res.data.data;
    });
    // 获取贴木皮列表
    this.axios("/api/material", { params: { sub_type_id: 2 } }).then((res) => {
      this.materialWoodSkinList = res.data.data;
    });
    // 获取油漆列表
    this.axios("/api/material_combination").then((res) => {
      this.materialPaintList = res.data.data;
    });
    // 获取五金列表
    this.axios("/api/material", { params: { sub_type_id: 5 } }).then((res) => {
      this.metalsList = res.data.data;
    });
    // 获取部件分类列表
    this.axios("/api/basics_parts_index").then((res) => {
      this.partsList = res.data.data;
    });
    // 获取木板列表
    this.axios("/api/material", { params: { sub_type_id: 1 } }).then((res) => {
      this.materialWoodList = res.data.data;
    });
    this.initData(this.order_no, this.orders_area_product_detail_id);
  },
  methods: {
    initData(order_no, orders_area_product_detail_id) {
      this.axios({
        method: "get",
        url: "/api/order_area_explode_detail",
        params: {
          order_no,
          orders_area_product_detail_id,
        },
      }).then((res) => {
        this.formData = res.data;
        // this.formData.basic_product_id = 8;
        // 获取产品分类、测量字段
        this.handleMatchBP(this.productTypes, this.formData.basic_product_id);
        this.handleClick(JSON.stringify(this.nowSelectObj));
        if (this.formData.parts.length == 0) {
          this.formData.parts = [
            {
              isAddPart: true, //是否为新增部件
              long: "",
              wide: "",
              thick: "",
              parts_type: "", //部件分类名称
              pay_state: "", //标签
              part_id: "", //部件名称
              company: "", //单位
              processCombination: "", //工艺组合名称
              process_price: "", //工艺价格
              proportion: "", //产值比例
              properties: [], //工艺属性
              isShowProcessLine: true, //是否展示工艺路线
              ProcessAttrList: JSON.parse(
                JSON.stringify(this.tempProcessAttrList)
              ), //工艺属性列表
              partsProcessLineTableData: [], //工艺路线表格
              partsWoodTableData: [
                {
                  title: "",
                  spare_parts: "",
                  number: "",
                  company: "",
                  long: "",
                  wool_long: "",
                  wide: "",
                  wool_wide: "",
                  thick: "",
                  technological_requirement_id: "",
                  sub_num: "",
                  veneer_id: "",
                  paint_id: "",
                  label: "",
                  print_num: "",
                },
              ], //木板表格
              partsMetalseData: [], //五金表格
              partsNameList: [{ id: "", title: "" }], //部件名称列表
              partsProcessRouteList: [{ id: "", title: "" }], //工艺组合名称列表
              checkBox: [],
            },
          ];
        } else {
          this.handleSimilarProductConfirm(res.data.product_id, this.formData);
        }
      });
    },
    handleMatchBP(array, id) {
      array.forEach((element, index) => {
        if (element.id != id) {
          if (element.child && element.child.length > 0) {
            return this.handleMatchBP(element.child, id);
          }
        } else {
          this.nowSelectObj = element;
        }
      });
    },
    getChangeLists(e) {},
    saveTableData(row, index) {
      if (this.isNewProcess) {
        let temparr = [];
        this.selectTags.forEach((el) => {
          temparr.push(el.id);
        });
        this.axios({
          method: "post",
          url: "/api/technological_route_edit",
          data: {
            id: "",
            title: this.info.title,
            procedure_id: temparr.join(","),
          },
        }).then((res) => {
          if (res.code == 200) {
            this.formData.parts[
              this.tempSelectedPartIndex
            ].partsProcessLineTableData = [];
            this.formData.parts[
              this.tempSelectedPartIndex
            ].partsProcessLineTableData = this.formData.parts[
              this.tempSelectedPartIndex
            ].partsProcessLineTableData.concat(this.selectTags);
            this.showProcessLineDetailModal = false;
            this.formData.parts[
              this.tempSelectedPartIndex
            ].process_name = this.info.title;
          }
        });
      } else {
        this.formData.parts[
          this.tempSelectedPartIndex
        ].partsProcessLineTableData = [];
        this.formData.parts[
          this.tempSelectedPartIndex
        ].partsProcessLineTableData = this.formData.parts[
          this.tempSelectedPartIndex
        ].partsProcessLineTableData.concat(this.selectTags);
        this.showProcessLineDetailModal = false;
        this.formData.parts[
          this.tempSelectedPartIndex
        ].process_name = this.info.title;
      }
    },
    // 删除工艺路线列表项
    handleProcessLineDele(row, i, index) {
      let formData = JSON.parse(JSON.stringify(this.formData));
      formData.parts[index].partsProcessLineTableData.splice(i, 1);
      this.formData = formData;
    },
    //选择相似产品
    handleSimilarProductShow() {
      this.showSimilarProductModal = true;
      this.similarProductLoading = true;
      this.similarProductData.type_id = "";
      this.similarProductData.title = "";
      this.similarProductData.model = "";
      this.similarProductData.url_number = "";
      this.axios("/api/product", {
        params: {
          type_id: this.similarProductData.type_id,
          title: this.similarProductData.title,
          model: this.similarProductData.model,
          url_number: this.similarProductData.url_number,
          page_size: this.similarProductData.page_size,
          page_index: this.similarProductData.page_index,
        },
      }).then((res) => {
        this.similarProductLoading = false;
        this.similarProductData.similarProductList = res.data.data;
        this.similarProductData.total = res.data.total;
      });
    },
    changeSimilarProductPage(e) {
      this.similarProductLoading = true;
      this.axios("/api/product", {
        params: {
          type_name: this.similarProductData.type_name,
          title: this.similarProductData.title,
          model: this.similarProductData.model,
          url_number: this.similarProductData.url_number,
          page_size: this.similarProductData.page_size,
          page_index: e,
        },
      }).then((res) => {
        this.similarProductLoading = false;
        this.similarProductData.similarProductList = res.data.data;
        this.similarProductData.similarProductList.forEach((el) => {
          el.selected = false;
        });
        this.similarProductData.total = res.data.total;
      });
    },
    handleSimilarProductSearch() {
      this.similarProductLoading = true;
      this.axios("/api/product", {
        params: {
          type_id: this.similarProductData.type_id,
          title: this.similarProductData.title,
          model: this.similarProductData.model,
          url_number: this.similarProductData.url_number,
          page_size: this.similarProductData.page_size,
          page_index: this.similarProductData.page_index,
        },
      }).then((res) => {
        this.similarProductLoading = false;
        this.similarProductData.similarProductList = res.data.data;
        this.similarProductData.similarProductList.forEach((el) => {
          el.selected = false;
        });
        this.similarProductData.total = res.data.total;
      });
    },
    // 产值比校验
    handleProportionEdit(e, row, index) {
      // e.target.value
    },
    handleSimilarProductSelected(row, oldrow) {
      this.tempSimilarProductData = row;
    },
    handleSimilarProductConfirm(id, isEditItem) {
      if (id) {
        this.axios({
          method: "get",
          url: "/api/product",
          params: {
            id,
          },
        }).then((res) => {
          if (res.code == 200) {
            res.data.part.forEach((element) => {
              element.part_title = element.title;
              this.formData.parts.forEach((ele, idx) => {
                if (element.part_id == ele.part_id) {
                  element.process_ids = ele.process_ids;
                  element.route_id = ele.route_id;
                  element.produce_list = ele.produce_list;
                  element.process_list = ele.process_list;
                  if (isEditItem) {
                    const temp_arr = isEditItem.parts.filter(
                      (v) => v.part_id == element.part_id
                    );
                    element.long = temp_arr[temp_arr.length - 1].long;
                    element.wide = temp_arr[temp_arr.length - 1].wide;
                    element.thick = temp_arr[temp_arr.length - 1].thick;
                    element.detail = temp_arr[temp_arr.length - 1].detail;
                  }
                }
              });
            });
            this.formData.parts = res.data.part;
            //label
            // this.formData.title = res.data.title;
            // this.formData.unit = res.data.unit;
            // this.formData.remark = res.data.remark;
            // this.formData.url = res.data.url;
            // this.formData.url_number = res.data.url_number;
            // this.formData.measure = res.data.measure_id
            // if (isEditItem) {
            //   res.data.part.forEach((element, index) => {
            //     Object.assign(element, this.formData.parts[index]);
            //   });
            // }
            this.formData.parts.map((element) => {
              element.partsProcessLineTableData = [];
              element.proportion = element.ratio;
              element.isShowProcessLine = true;
              element.ProcessAttrList = JSON.parse(
                JSON.stringify(this.tempProcessAttrList)
              ); //工艺属性列表
              let obj = { value: element.part_id, title: element.title };
              if (!isEditItem) {
                element.thick = element.formula_h;
                element.wide = element.formula_w;
                element.long = element.formula_l;
              }
              this.handlePartsNameSelect_test(element, obj);
            });
            if (isEditItem) {
              let item = isEditItem;
              // let item = JSON.parse(JSON.stringify(isEditItem));
              item.parts.forEach((it) => {
                it.processCombination = it.route_id;
                let obj = { value: it.route_id, label: "" };
                this.handleProcessRouteSelect(it, obj);
              });
              isEditItem = item;
            }
          }
        });
      } else {
        this.showSimilarProductModal = false;
      }
    },
    //选择部件分类名称
    handlePartsSelect(e, item) {
      this.axios({
        method: "get",
        url: "/api/parts_index",
        params: {
          bp_id: e,
        },
      })
        .then((res) => {
          this.$nextTick(() => {
            item.part_id = "";
            item.partsNameList = res.data.data;
            this.$forceUpdate();
          });
        })
        .catch((err) => {});
    },
    //新增部件名称
    handlePartTitleCreate(item, val) {
      item.partsNameList.push({
        id: val,
        title: val,
      });
      this.$forceUpdate();
    },
    // 部件名称
    handlePartsNameSelect(item, val) {
      if (val && val.value) {
        item.part_title = val.label;
        if (val.label != val.value) {
          this.axios({
            method: "get",
            url: "/api/parts_detail",
            params: {
              id: val.value,
            },
          }).then((res) => {
            item.pay_state = res.data.label;
            item.company = res.data.company;
            item.ProcessAttrList = JSON.parse(
              JSON.stringify(this.tempProcessAttrList)
            );
            item.partsWoodTableData ? "" : (item.partsWoodTableData = []);
            item.partsMetalseData ? "" : (item.partsMetalseData = []);
            item.partsWoodTableData = res.data.detail.filter(
              (v) => v.type_id == 1 || v.type_id == 2
            );
            item.partsWoodTableData.map((v) => {
              v.wool_long = "";
              v.wool_wide = "";
            });
            item.partsMetalseData = res.data.detail.filter(
              (v) => v.type_id == 5
            );
          });
        } else {
          // item.isAddPart = true;
          // item.ProcessAttrList = this.tempProcessAttrList;
          // item.partsWoodTableData = [];
          // item.partsMetalseData = [];
          // item.process_name = "";
        }
      }
    },
    handlePartsNameSelect_test(item, val) {
      if (val && val.value) {
        if (val.label != val.value) {
          this.axios({
            method: "get",
            url: "/api/parts_detail",
            params: {
              id: val.value,
            },
          }).then((res) => {
            item.pay_state = res.data.label;
            item.company = res.data.company;
            item.ProcessAttrList = JSON.parse(
              JSON.stringify(this.tempProcessAttrList)
            );
            item.partsWoodTableData ? "" : (item.partsWoodTableData = []);
            item.partsMetalseData ? "" : (item.partsMetalseData = []);
            item.partsWoodTableData = res.data.detail.filter(
              (v) => v.type_id == 1 || v.type_id == 2
            );
            item.partsWoodTableData.map((v, k) => {
              const temp_arr = item.detail.filter((w) => w.id == v.id);
              v.wool_long = "";
              v.wool_wide = "";
              if (temp_arr.length > 0) {
                v.long = temp_arr[temp_arr.length - 1].long;
                v.wool_long = temp_arr[temp_arr.length - 1].wool_long;
                v.wide = temp_arr[temp_arr.length - 1].wide;
                v.wool_wide = temp_arr[temp_arr.length - 1].wool_wide;
              }
            });
            item.partsMetalseData = res.data.detail.filter(
              (v) => v.type_id == 5
            );
            item.parts_type = res.data.p_id;
            this.axios({
              method: "get",
              url: "/api/parts_index",
              params: {
                bp_id: item.parts_type,
              },
            }).then((r) => {
              item.partsNameList = r.data.data;
              item.part_id = res.data.id;
              this.$forceUpdate();
            });
            item.company = res.data.company;
            // item.partsNameList = [{ id: res.data.id, title: res.data.title }]
            item.pay_state = res.data.label;
            // item.partsWoodTableData = res.data.detail;
            this.showSimilarProductModal = false;
          });
        } else {
          // item.isAddPart = true;
          // item.ProcessAttrList = this.tempProcessAttrList;
          // item.partsWoodTableData = [];
          // item.partsMetalseData = [];
          // item.process_name = "";
        }
      }
    },
    // 选择工艺组合名称
    handleProcessRouteSelect(item, val) {
      if (val) {
        this.axios({
          method: "get",
          url: "/api/process_route_detail",
          params: {
            id: val.value,
          },
        }).then((res) => {
          this.info = res.data;
          this.info.bps = this.temp_info_bps;
          item.process_price = res.data.price;
          this.selectTags = res.data.produce_list;
          const selectTagsId = this.selectTags.map((item) => item.id);
          item.ProcessAttrList = res.data.list;
          item.process_list.map((v) => {
            item.ProcessAttrList.map((c) => {
              if (c.name == v.name) {
                c.selected_value = v.id * 1;
              }
            });
          });
          item.process_name = res.data.technological_route_title;
          item.properties = res.data.pp_id.split(","); ///存在问题
          this.info.bps.forEach((v) => {
            v.cld &&
              v.cld.length > 0 &&
              v.cld.forEach((z) => {
                z.show = selectTagsId.includes(z.id);
                z.cld &&
                  z.cld.length > 0 &&
                  z.cld.forEach((elem) => {
                    elem.show = selectTagsId.includes(elem.id);
                    elem.cld &&
                      elem.cld.length > 0 &&
                      elem.cld.forEach((ele) => {
                        ele.show = selectTagsId.includes(ele.id);
                        ele.cld &&
                          ele.cld.length > 0 &&
                          ele.cld.forEach((el) => {
                            el.show = selectTagsId.includes(el.id);
                          });
                      });
                  });
              });
          });
          if (item.produce_list && item.produce_list.length > 0) {
            item.produce_list.map((v) => (v.wages = v.price));
            item.partsProcessLineTableData = item.produce_list;
          } else {
            item.partsProcessLineTableData = this.selectTags;
          }
        });
      }
    },
    handleProcessSelect() {},
    handleProcessLineShow(item, index) {
      item.isShowProcessLine
        ? (document.getElementsByClassName("parts_content_lineTable")[
            index
          ].style.height = "89px")
        : (document.getElementsByClassName("parts_content_lineTable")[
            index
          ].style.height = "auto");
      item.isShowProcessLine = !item.isShowProcessLine;
      this.$forceUpdate();
    },
    //选择工艺路线
    editRouter(item, index) {
      // 重新打开则重新判定是否为新增工艺路线
      this.isNewProcess = false;
      this.showProcessLineModal = true;
      this.tempSelectedPartIndex = index;
      this.handleSearchProcessLine(this.tempProcessLine.title);
    },
    handleSearchProcessLine(title) {
      this.axios({
        method: "get",
        url: "/api/technological_route",
        params: {
          title,
        },
      }).then((res) => {
        this.processLineTableData = res.data.data;
      });
    },
    changeCheck(e, item, selectArray) {
      // 一旦更改便标记为新增工艺路线
      this.isNewProcess = true;
      //复选框选中与非选中同时同步tag标签跟随操作
      item.show = e;
      if (e) {
        selectArray.push(item);
      } else {
        let id = item.id;
        let id_index = selectArray.findIndex((v) => v.id == id);
        selectArray.splice(id_index, 1);
      }
    },
    closeTag(key, arr, row) {
      //取消tag标签展示操作并同步下方的复选框ui同步
      for (const key in this.info.bps) {
        const element = this.info.bps[key];
        element.cld.map((p) => {
          p.id == row.id ? (p.show = false) : "";
          p.cld &&
            p.cld.length > 0 &&
            p.cld.map((q) => {
              q.id == row.id ? (q.show = false) : "";
              q.cld &&
                q.cld.length > 0 &&
                q.cld.map((r) => {
                  r.id == row.id ? (r.show = false) : "";
                  r.cld &&
                    r.cld.length > 0 &&
                    r.cld.map((s) => {
                      s.id == row.id ? (s.show = false) : "";
                    });
                });
            });
        });
      }
      arr.splice(key, 1);
    },
    setBoxChange(parent, child) {
      return;
      // const { type } = this.$route.query;
      // if (type == 3) {
      //   return;
      // }
      // child.show = !child.show;
      // child.list.forEach((element) => {
      //   element.show = child.show;
      // });
    },
    setRadioChange(parent, child, index, parts, cld) {
      if (this.type == 1) {
        cld.forEach((element) => {
          element.list.forEach((elem) => {
            elem.id != child.id && (elem.show = false);
          });
        });
        child.show = !child.show;
        parts.properties[index] = child.id;
      }
      this.$forceUpdate();
    },
    // setRadioChange(parent, child) {
    //   const { type } = this.$route.query;
    //   if (type == 3) {
    //     return;
    //   }
    //   // let flag = true;
    //   parent.list.forEach((element) => {
    //     element.show = false
    //     if (!element.show) {
    //       // flag = false;
    //     }
    //   });
    //   child.show = !child.show;
    //   console.log('child.show :>> ', child.show);
    //   // parent.show = flag;
    //   this.$forceUpdate();
    // },
    handleProcessLineSet(row, index) {
      this.process_name = row.title;
      this.info.id = row.id;
      this.info.title = row.title;
      this.info.procedure_id = row.procedure_id;
      this.selectTags = [];
      const arr = this.info.procedure_id
        ? this.info.procedure_id.split(",")
        : [];
      for (const key in this.info.bps) {
        const el = this.info.bps[key];
        el.cld.forEach((z) => {
          z.show = false;
          z.cld &&
            z.cld.length > 0 &&
            z.cld.forEach((elem) => {
              elem.show = false;
              elem.cld &&
                elem.cld.length > 0 &&
                elem.cld.forEach((ele) => {
                  ele.show = false;
                });
            });
        });
      }
      for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        this.info.bps.map((lv1) => {
          lv1.cld &&
            lv1.cld.length > 0 &&
            lv1.cld.map((lv2) => {
              if (lv2.id == element) {
                lv2.show = true;
                lv2.p_id && this.selectTags.push(lv2);
              }
              lv2.cld &&
                lv2.cld.length > 0 &&
                lv2.cld.map((lv3) => {
                  if (lv3.id == element) {
                    lv3.show = true;
                    lv3.p_id && this.selectTags.push(lv3);
                  }
                  lv3.cld &&
                    lv3.cld.length > 0 &&
                    lv3.cld.map((lv4) => {
                      if (lv4.id == element) {
                        lv4.show = true;
                        lv4.p_id && this.selectTags.push(lv4);
                      }
                    });
                });
            });
        });
      }
      this.showProcessLineDetailModal = true;
      this.showProcessLineModal = false;
    },
    changeProcessLineSize() {},
    changeProcessLinePage() {},
    handleProcessLineConfirm() {},
    handleProcessLineSearch() {},
    handlePartAdd(item, index) {
      let obj = {
        isAddPart: true,
        long: "",
        width: "",
        thick: "",
        parts_type: "", //部件分类名称
        pay_state: "", //标签
        part_id: "", //部件名称
        company: "", //单位
        processCombination: "", //工艺组合名称
        process_price: "", //工艺价格
        ProcessAttrList: JSON.parse(JSON.stringify(this.tempProcessAttrList)), //工艺属性列表
        partsProcessLineTableData: [
          {
            id: "",
            type: "",
            title: "",
            time: "",
            wages: "",
            capacity: "",
          },
        ], //工艺路线表格
        partsWoodTableData: [
          {
            title: "",
            spare_parts: "",
            number: "",
            company: "",
            long: "",
            wool_long: "",
            wide: "",
            wool_wide: "",
            thick: "",
            technological_requirement_id: "",
            sub_num: "",
            veneer_id: "",
            paint_id: "",
            label: "",
            print_num: "",
          },
        ], //零部件表格
        partsMetalseData: [
          {
            spare_parts: "",
            number: "",
            company: "",
            price: "",
            total_price: "",
          },
        ], //五金表格
        partsNameList: [{ id: "", title: "" }], //部件名称列表
        checkBox: [],
        keyUseType: 0,
      };
      this.formData.parts.splice(index + 1, 0, obj);
    },
    handlePartCopy(item, index) {
      let obj = JSON.parse(JSON.stringify(item));
      // this.formData.parts.splice(index, 0, obj);
      this.formData.parts.push(obj);
    },
    handlePartDele(item, index) {
      this.formData.parts.splice(index, 1);
    },
    handlePartWoodAdd(index) {
      let formData = JSON.parse(JSON.stringify(this.formData));
      formData.parts[index].partsWoodTableData.push({
        type_id: 1,
        title: "",
        spare_parts: "",
        number: "",
        company: "",
        long: "",
        wool_long: "",
        wide: "",
        wool_wide: "",
        thick: "",
        technological_requirement_id: "",
        sub_num: "",
        veneer_id: "",
        paint_id: "",
        label: "",
        print_num: "",
      });
      this.formData = formData;
    },
    handlePartWoodCopy(row, index, parentIndex) {
      let obj = JSON.parse(
        JSON.stringify(
          this.formData.parts[parentIndex].partsWoodTableData[index]
        )
      );
      this.formData.parts[parentIndex].partsWoodTableData.splice(
        index + 1,
        0,
        obj
      );
      // this.formData.parts[parentIndex].partsWoodTableData.push(obj)
      this.formData.parts = JSON.parse(JSON.stringify(this.formData.parts));
    },
    handlePartWoodDele(row, index, parentIndex) {
      this.formData.parts[parentIndex].partsWoodTableData.splice(index, 1);
      this.formData.parts = JSON.parse(JSON.stringify(this.formData.parts));
    },
    handlePartMetalsAdd(index) {
      let formData = JSON.parse(JSON.stringify(this.formData));
      if (formData.parts[index].partsMetalseData == undefined) {
        formData.parts[index].partsMetalseData = [];
      }
      formData.parts[index].partsMetalseData.push({
        type_id: 2,
        spare_parts: "",
        number: "",
        company: "",
        price: "",
        total_price: "",
      });
      this.formData = formData;
    },
    handlePartMetalsCopy(row, index, parentIndex) {
      let obj = JSON.parse(JSON.stringify(row));
      this.formData.parts[parentIndex].partsMetalseData.splice(
        index + 1,
        0,
        obj
      );
      this.formData.parts = JSON.parse(JSON.stringify(this.formData.parts));
    },
    handleClose(done) {
      done();
    },
    handlePartMetalsDele(row, index, parentIndex) {
      this.formData.parts[parentIndex].partsMetalseData.splice(index, 1);
      this.formData.parts = JSON.parse(JSON.stringify(this.formData.parts));
    },
    handleProcessLineSelected() {},
    async postData() {
      let sum = 0;
      this.formData.parts.forEach((element) => {
        sum += element.proportion * 1;
      });
      // const BJ_name = this.formData.parts.map((item) => {
      //   return item.part_id;
      // });
      // const atfer_BJ_name = Array.from(new Set(BJ_name));
      // if (atfer_BJ_name.length != BJ_name.length) {
      //   return this.$Message.error("部件名称存在重复");
      // }
      if (sum != 100) {
        this.$Message.error("产值比之和须为100");
      } else {
        // 部件保存
        let save_sucess = true;
        for (let i in this.formData.parts) {
          let element = this.formData.parts[i];
          let flag = true;
          // element.partsNameList.forEach((ele) => {
          //   if (element.part_id == ele.id && ele.id == ele.title) {
          //     flag = true;
          //   }
          // });
          if (flag) {
            let result = await this.axios({
              method: "post",
              url: "/api/order_area_explode_part",
              data: {
                top: {
                  p_id: element.parts_type,
                  bp_id: this.nowSelectObj.id, //相似产品
                  company: element.company,
                  label: element.pay_state,
                  title: element.part_title,
                },
                op: "add",
                detail: [
                  ...element.partsWoodTableData,
                  ...element.partsMetalseData,
                ],
              },
            });
            if (result.code == 200) {
              element.part_id = result.data.id;
              // 工艺路线保存 partsProcessLineTableData
              let bool = true;
              // element.partsProcessRouteList.forEach((ele) => {
              //   if (
              //     element.processCombination == ele.id &&
              //     ele.id == ele.title
              //   ) {
              //     bool = true;
              //   }
              // });
              let properties = element.ProcessAttrList.map((v) => {
                return { name: v.name, value: v.selected_value || "" };
              });
              // element.partsProcessLineTableData.forEach(async (el, idx) => {
              //   if (idx == element.length - 1) {
              //     procedure += el.id + "";
              //   } else {
              //     procedure += el.id + ",";
              //   }
              // });
              if (bool) {
                let res = await this.axios({
                  method: "post",
                  url: "/api/order_area_explode_process",
                  data: {
                    parts_id: element.part_id,
                    price: element.process_price || 0,
                    properties,
                    title: element.processCombination,
                    procedure: element.partsProcessLineTableData,
                    op: "add",
                  },
                });
                if (res.code == 200) {
                  element.route_id = res.data.id;
                  element.part_id = result.data.id;
                } else {
                  return;
                }
              } else {
                element.route_id = element.processCombination;
              }
            } else {
              save_sucess = false;
            }
          } else {
            // 工艺路线保存 partsProcessLineTableData
            let bool = true;
            // element.partsProcessRouteList.forEach((ele) => {
            //   if (element.processCombination == ele.id && ele.id == ele.title) {
            //     bool = true;
            //   }
            // });
            let properties = element.ProcessAttrList.map((v) => {
              return { name: v.name, value: v.selected_value || "" };
            });
            if (bool) {
              let res = await this.axios({
                method: "post",
                url: "/api/order_area_explode_process",
                data: {
                  parts_id: element.part_id,
                  price: element.process_price || 0,
                  properties,
                  title: element.processCombination || "",
                  procedure: element.partsProcessLineTableData,
                  op: "add",
                },
              });
              if (res.code == 200) {
                element.route_id = res.data.id;
              } else {
                save_sucess = false;
              }
            } else {
              element.route_id = element.processCombination;
            }
          }
        }
        this.formData.parts.forEach((element) => {
          element.processCombination = element.processCombination || "";
          element.properties = element.processCombination || "";
          element.detail = [
            ...element.partsWoodTableData,
            ...element.partsMetalseData,
          ];
        });
        // 产品编辑保存
        if (save_sucess) {
          await this.axios({
            method: "post",
            url: "/api/order_area_explode_save",
            data: {
              ...this.formData,
              order_no: this.$route.query.order_no,
              oa_id: this.$route.query.oa_id,
              orders_area_product_detail_id: this.$route.query
                .orders_area_product_detail_id,
            },
          }).then((res) => {
            if (res.code == 200) {
              this.$Message.success(res.msg);
              this.goback();
            }
          });
        }
      }
    },
    goback() {
      this.$router.go(-1);
    },
    successKey(str) {
      if (this.keyUseType == 1) {
        this.formData.parts[this.attrParentindex].partsWoodTableData[
          this.attrIndex
        ][this.attrName] = str;
        // this.$set(this.formData.parts[this.attrParentindex].partsWoodTableData[this.attrIndex],[this.attrName], str)
      } else {
        this.formData.parts[this.attrParentindex][this.attrName] = str;
      }
      this.formData.parts = JSON.parse(JSON.stringify(this.formData.parts));
      this.showKey = false;
      this.$forceUpdate();
    },
    cancelKey() {
      this.showKey = false;
    },
    handleMeasureSearch() {},
    openKey(partsIndex, index, attr, partsItem) {
      this.showKey = true;
      this.attrParentindex = partsIndex;
      if (index != -1) {
        this.attrIndex = index;
        this.keyUseType = 1;
        this.KeyBoardValue = partsItem.partsWoodTableData[index][attr] + "";
      } else {
        this.keyUseType = 2;
        this.KeyBoardValue = partsItem[attr] + "";
      }
      this.attrName = attr;
      // })
    },
    changeSe(e, n, partsIndex, row) {
      if (e) {
        let event = window.event;
        let unit = event.target.dataset.unit;
        // row.company = unit ? unit : ''
        // row.thick = e.tag
        // row.title = e.title
        this.formData.parts[partsIndex].partsWoodTableData[n].company = unit
          ? unit
          : "";
        this.formData.parts[partsIndex].partsWoodTableData[n].thick = e.tag;
        this.formData.parts[partsIndex].partsWoodTableData[n].title = e.title;
      }
    },
    changeMetal(e, n, partsIndex) {
      let event = window.event;
      let unit = event.target.dataset.unit;
      this.formData.parts[partsIndex].partsMetalseData[n].company = unit
        ? unit
        : "";
    },
    handleMetalTotalPriceChange(row) {
      row.total_price = 1 * row.price * row.number;
    },
    handleClick(e) {
      let data = JSON.parse(e);
      this.nowSelectObj = data;
      this.info.bp_id = this.nowSelectObj.id;
      this.axios("/api/basics_product_list", {
        params: { id: this.nowSelectObj.id },
      }).then((res) => {
        res.data.forEach((element) => {
          if (element.id == this.nowSelectObj.id) {
            this.measureList = element.measure;
          }
        });
      });
    },
    checkImg(item) {
      let list = [];
      item.forEach((el) => {
        list.push({ img_url: el });
      });
      // this.axios('/api/orders_img', { params: { id: this.order_area_product_id, type: 1 } }).then(res => {
      // if (res.code == 200) {
      this.$previewImg({
        list,
        baseUrl: this.$store.state.ip,
        baseImgField: "img_url",
        baseTitleField: "",
      });
      // }
      // })
    },
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.BidSystemProductDeOrderDeorderdetail {
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  .top_info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
    span {
      min-width: 40px;
      margin-right: 5px;
    }
    div {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 200px;
      padding: 10px;
      img {
        max-width: 60px;
      }
    }
  }
  .similar_product {
    position: relative;
    padding: 15px;
    margin-bottom: 30px;
    border-radius: 5px;
    box-shadow: 1px 1px 5px 1px #999;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .parts {
    position: relative;
    padding: 15px;
    margin-bottom: 30px;
    border-radius: 5px;
    box-shadow: 1px 1px 5px 1px #999;
    /deep/ .ivu-form-item {
      display: inline-block;
      width: 350px;
    }
    .parts_title {
      display: flex;
      justify-content: space-between;
    }
    .parts_content {
      font-size: 14px;
      .parts_content_attr {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        // width: 350px;
        span {
          width: 80px;
          text-align: center;
        }
        div {
          display: flex;
          width: 100%;
          justify-content: flex-start;
          align-items: center;
          margin: 5px 0;
          span {
            margin: 0 5px;
          }
        }
      }
      .parts_content_line {
        // width: 350px;
        padding-left: 17px;
        span {
          margin-right: 5px;
        }
      }
      .parts_content_lineTable,
      .parts_content_partTable,
      .parts_content_metalsTable {
        margin: 10px 0;
      }
      .parts_content_part {
        span {
          margin-right: 5px;
        }
      }
      .parts_content_lineTable {
        overflow: hidden;
      }
    }
  }
}
.similarProductModal,
.ProcessLineModal {
  /deep/ .ivu-form-item {
    display: inline-block;
    width: 220px;
  }
}
.page {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.hierarchy {
  .radio-g {
    padding: 10px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .radio-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      border-left: 1px solid #3764ff;
      .radio-us {
        background: #fff;
        padding: 5px 20px;
        margin: 5px;
        margin-right: 18px;
        color: #3764ff;
        border-radius: 15px;
        border: 1px solid #3764ff;
        cursor: pointer;
      }
      .radio-us-foc {
        color: #fff;
        background: #3764ff;
        border: 1px solid #3764ff;
      }
    }
    .tit_box {
      .box-us {
        background: #fff;
        padding: 5px 20px;
        margin: 5px;
        margin-right: 18px;
        color: #3764ff;
        border-radius: 5px;
        border: 1px solid #3764ff;
        cursor: pointer;
        width: 100px;
        display: inline-block;
        text-align: center;
      }
      .box-us-foc {
        color: #fff;
        background: #3764ff;
        border: 1px solid #3764ff;
      }
    }
    .radio-us-none {
      display: none;
    }
  }
}
.modal_process_route1 {
  display: flex;
  justify-content: space-around;
}
.modal_process_route {
  .modal_process_route_top {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
  }
}
/deep/ .ivu-table-wrapper {
  overflow: visible;
}

/deep/ .ivu-modal {
  .modal_process_route_content {
    max-height: 600px;
    position: relative;
    overflow: hidden;
    overflow-y: auto;
  }
}
.SortableList {
  // display: flex;
  // justify-content: flex-start;
  // align-items: center;
  // flex-wrap: wrap;
  .SortableItem {
    .tag-modal {
      display: flex;
      align-items: center;
      .before {
        width: 20px;
        background: #3764ff;
        height: 24px;
        border-radius: 5px 0 0 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
      }
    }
  }
}
/deep/.ivu-modal-body {
  height: 750px;
  overflow: auto;
}
.modal_content {
  display: flex;
  justify-content: space-around;
  height: 100%;
  .modal_content_left {
    max-width: 40%;
    min-width: 30%;
    border-right: 1px solid #d8d8d8;
  }
  .modal_content_right {
    width: 60%;
    max-height: 700px;
    padding-left: 10px;
    overflow: hidden;
    overflow-y: auto;
    font-size: 18px;
  }
}
.vertical-center-modal1 {
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal {
    top: 0;
  }
}
/deep/.el-input--small .el-input__inner {
  height: 24px;
  line-height: 24px;
}
</style>