
<template>
  <div class="page">
    <el-dialog
      title="导入BOM"
      :visible.sync="materiaBomImportDialog.visible"
      width="700px"
    >
      <div :span="24">
        <el-row :span="24">
          <el-upload
            ref="upload"
            action="/wm/upload/"
            :file-list="fileBomList"
            :on-change="readExcel"
            :auto-upload="false"
          >
            <el-button
              slot="trigger"
              icon="el-icon-upload"
              size="small"
              type="primary"
              >导入EXCEL文件</el-button
            >
          </el-upload>
        </el-row>
        <el-divider></el-divider>

        <el-row :span="24">
          <el-link href="/bom.xlsx" type="primary" target="_blank"
            >模板下载</el-link
          >
        </el-row>
        <el-divider></el-divider>

        <!-- <el-row>
          <el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
            <el-form-item
              v-for="(field, index) in dynamicValidateForm.fields"
              :label="field.label"
              :key="field.key"
              label-width="100px"
            >
              <el-select
                @change="selectChange"
                v-model="field.col"
                placeholder="请选择对应列"
              >
                <el-option
                  v-for="item in tableData.dict.fieldList"
                  :key="item.fieldCode"
                  :label="item.fieldName"
                  :value="item.fieldCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-row>  -->

        <el-row>
          <el-form
            :model="dynamicValidateForm"
            v-if="dynamicValidateForm.fields.length > 0"
            ref="dynamicValidateForm"
          >
            <el-form-item
              v-for="(field, index) in fieldsData"
              :label="field.fieldName"
              :key="field.fieldCode"
              label-width="100px"
            >
              <el-select
                @change="selectChange"
                v-model="field.col"
                placeholder="请选择对应列"
              >
                <el-option
                  v-for="item in dynamicValidateForm.fields"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-row>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="materiaBomImportDialog.visible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="doImportBom">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="产品信息"
      :visible.sync="bomDirDialog.visible"
      width="35%"
    >
      <el-dialog
        width="90%"
        title="选择物料"
        :visible.sync="bomDirDialog.innerVisible"
        append-to-body
      >
        <div class="mytree" style="width: 250px; margin-right: 20px">
          <el-tree
            ref="categoryTree"
            id="el-tree"
            indent="0"
            :data="materiaData"
            node-key="id"
            :expand-on-click-node="false"
            @node-click="handleMateriaBomNodeClick"
            :props="treeMateriaProps"
            :load="loadMateriaNode"
            :render-content="renderMateriaContent"
            highlight-current
            lazy
          >
          </el-tree>
        </div>
        <div style="flex: 1; overflow: scroll">
          <!--搜索-->
          <div>
            <el-form :inline="true" size="mini">
              <el-form-item label="物料名称">
                <el-input
                  v-model="searchform.name"
                  placeholder="物料名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="物料代码">
                <el-input
                  v-model="searchform.code"
                  placeholder="物料代码"
                ></el-input>
              </el-form-item>

              <el-form-item>
                <el-button plain @click="materiaTablesearchConfirm"
                  >查询</el-button
                >
                <el-button plain @click="materiaTablesearchClear"
                  >清空</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <!--产品列表-->
          <el-table
            size="mini"
            :data="materiaTableData"
            @row-click="clickTableBomDirRow"
            border
            highlight-current-row
          >
            <el-table-column prop="name" label="物料名称" />
            <el-table-column prop="code" label="物料代码" />

            <el-table-column prop="categoryName" label="类目" />
            <el-table-column prop="specModel" label="规格型号">
            </el-table-column>

            <el-table-column
              prop="unitOfMeasure"
              :formatter="formatter"
              label="计量单位"
            >
            </el-table-column>
            <el-table-column prop="useNum" label="默认用量"> </el-table-column>
            <el-table-column
              prop="supplyType"
              :formatter="formatter"
              label="补给方式"
            >
            </el-table-column>
            <el-table-column
              prop="costPlan"
              :formatter="formatterMoney"
              label="计划成本"
            >
            </el-table-column>

            <el-table-column prop="mainPicUrl" label="图片">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <img
                    :src="scope.row.mainPicUrl"
                    style="width: auto; height: 300px"
                  />
                  <div slot="reference" class="name-wrapper">
                    <img
                      :src="scope.row.mainPicUrl"
                      min-width="70"
                      height="70"
                    />
                    <!-- <el-tag size="medium">{{ scope.row.name }}</el-tag> -->
                  </div>
                </el-popover>
              </template>
            </el-table-column>

            <el-table-column label="物料供应">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p
                    v-for="(item, index) in scope.row.supplierEntities"
                    :key="index"
                  >
                    供应商：{{ scope.row.supplierEntities[index].supplierName }}
                  </p>

                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{
                      scope.row.supplierEntities.length > 0 ? "有" : "无"
                    }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>

            <el-table-column
              width="100"
              v-for="($label, $value) in tableData.dict.extField"
              :key="$value"
              :prop="$value"
              :label="$label"
            >
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="pagination-wapper" style="height: 100px">
            <el-pagination
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              :current-page="materiaTable.currPage"
              :page-size="materiaTable.prePageResult"
              :page-sizes="[10, 20, 50, 100, 200]"
              layout="sizes, total, prev, pager, next, jumper"
              :total="materiaTable.totalResult"
            >
            </el-pagination>
          </div>
        </div>
      </el-dialog>

      <el-form
        :model="bomDirForm"
        :label-width="formLabelWidth"
        :rules="bomDirRules"
        ref="bomDirForm"
      >
        <el-row>
          <el-form-item label="产品代码" prop="code">
            <el-input
              v-model.trim="bomDirForm.code"
              v-if="bomDirForm.id != null"
              disabled
              size="small"
            ></el-input>
            <el-input
              v-model.trim="bomDirForm.code"
              v-else
              size="small"
            ></el-input>
            <el-tag type="danger" v-if="bomDirForm.id == null"
              >新增产品代码后将不可编辑修改！</el-tag
            >
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="产品名称" prop="name">
            <el-input v-model.trim="bomDirForm.name" size="small"></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="所属物料">
            <el-input v-model="bomDirForm.materiaName" readonly>
              <el-button slot="append" @click.prevent="selectBomDirMateria"
                >选择物料</el-button
              >
            </el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="备注">
            <el-input v-model="bomDirForm.remark" type="textarea"></el-input>
          </el-form-item>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button
          :disabled="(submitButtonDisabled = false)"
          @click="bomDirDialog.visible = false"
          >取 消</el-button
        >

        <el-button type="primary" @click="submitForm">保 存</el-button>
      </span>
    </el-dialog>

    <el-dialog title="产品BOM" :visible.sync="bomDialog.visible" width="50%">
      <el-form
        :model="bomForm"
        :label-width="formLabelWidth"
        :rules="bomRules"
        ref="bomForm"
      >
        <el-row>
          <el-form-item label="BOM类型" prop="useType">
            <el-select v-model="bomForm.useType" placeholder="请选择BOM类型">
              <el-option
                v-for="($label, $value) in tableData.dict.useType"
                :key="$value"
                :label="$label"
                :value="$value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="BOM版本">
              <el-input v-model="bomForm.version"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="bomForm.id != null">
          <el-form-item label="bom状态">
            <el-select v-model="bomForm.status" placeholder="请选择BOM状态">
              <el-option
                v-for="($label, $value) in tableData.dict.status"
                :key="$value"
                :label="$label"
                :value="$value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="备注">
            <el-input v-model="bomForm.remark" type="textarea"></el-input>
          </el-form-item>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="bomDialog.visible = false">取 消</el-button>

        <el-button
          type="primary"
          :disabled="(submitButtonDisabled = false)"
          @click="submitBomForm"
          >保 存</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="附件"
      :visible.sync="materiaAttsDialog.visible"
      width="50%"
    >
      <el-form
        :model="attform"
        :label-width="formLabelWidth"
        :rules="attRules"
        ref="attform"
      >
        <el-row>
          <el-form-item prop="attachType" label="附件分类">
            <el-select
              style="width: 100%"
              v-model="attform.attachType"
              placeholder="请选择附件种类"
            >
              <el-option
                v-for="($label, $value) in tableData.dict.attachType"
                :key="$value"
                :label="$label"
                :value="$value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item prop="attachUrl" label="附件">
            <el-upload
              class="upload-demo"
              action="/m/file/upload"
              :on-success="handleAttsSuccess"
              name="uploadFile"
              :data="{ prePath: '/image/plm/materia' }"
              :limit="1"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="备注">
            <el-input v-model="attform.remark" prop="remark"></el-input>
          </el-form-item>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="materiaAttsDialog.visible = false">取 消</el-button>

        <el-button
          type="primary"
          :disabled="(submitButtonDisabled = false)"
          @click="submitAttsForm"
          >保 存</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="BOM项" :visible.sync="bomItemDialog.visible" width="50%">
      <el-dialog
        width="90%"
        title="物料选择"
        :visible.sync="bomItemDialog.innerVisible"
        append-to-body
      >
        <div class="mytree" style="width: 250px; margin-right: 20px">
          <el-tree
            ref="categoryTree"
            id="el-tree"
            :data="materiaData"
            indent="0"
            node-key="id"
            :expand-on-click-node="false"
            @node-click="handleMateriaBomNodeClick"
            :props="treeMateriaProps"
            :load="loadMateriaNode"
            :render-content="renderMateriaContent"
            highlight-current
            lazy
          >
          </el-tree>
        </div>
        <div style="flex: 1; overflow: scroll">
          <div>
            <el-form :inline="true" size="mini">
              <el-form-item label="物料名称">
                <el-input
                  v-model="searchform.name"
                  placeholder="物料名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="物料代码">
                <el-input
                  v-model="searchform.code"
                  placeholder="物料代码"
                ></el-input>
              </el-form-item>

              <el-form-item>
                <el-button plain @click="materiaTablesearchConfirm"
                  >查询</el-button
                >
                <el-button plain @click="materiaTablesearchClear"
                  >清空</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <!--产品列表-->
          <el-table
            size="mini"
            v-loading="materialoading"
            :data="materiaTableData"
            @row-click="clickTableBomItemRow"
            border
            highlight-current-row
          >
            <el-table-column prop="name" label="物料名称" />
            <el-table-column prop="code" label="物料代码" />

            <el-table-column prop="categoryName" label="类目" />
            <el-table-column prop="specModel" label="规格型号">
            </el-table-column>

            <el-table-column
              prop="unitOfMeasure"
              :formatter="formatter"
              label="计量单位"
            >
            </el-table-column>
            <el-table-column prop="useNum" label="默认用量"> </el-table-column>
            <el-table-column
              prop="supplyType"
              :formatter="formatter"
              label="补给方式"
            >
            </el-table-column>
            <el-table-column
              prop="costPlan"
              :formatter="formatterMoney"
              label="计划成本"
            >
            </el-table-column>

            <el-table-column prop="mainPicUrl" label="图片">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <img
                    :src="scope.row.mainPicUrl"
                    style="width: auto; height: 300px"
                  />
                  <div slot="reference" class="name-wrapper">
                    <img
                      :src="scope.row.mainPicUrl"
                      min-width="70"
                      height="70"
                    />
                  </div>
                </el-popover>
              </template>
            </el-table-column>

            <el-table-column label="物料供应">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p
                    v-for="(item, index) in scope.row.supplierEntities"
                    :key="index"
                  >
                    供应商：{{ scope.row.supplierEntities[index].supplierName }}
                  </p>

                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{
                      scope.row.supplierEntities.length > 0 ? "有" : "无"
                    }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>

            <el-table-column
              width="100"
              v-for="($label, $value) in tableData.dict.extField"
              :key="$value"
              :prop="$value"
              :label="$label"
            >
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="pagination-wapper" style="height: 100px">
            <el-pagination
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              :current-page="materiaTable.currPage"
              :page-size="materiaTable.prePageResult"
              :page-sizes="[10, 20, 50, 100, 200]"
              layout="sizes, total, prev, pager, next, jumper"
              :total="materiaTable.totalResult"
            >
            </el-pagination>
          </div>
        </div>
      </el-dialog>

      <el-form
        :model="bomItemForm"
        :label-width="formLabelWidth"
        :rules="bomItemRules"
        ref="bomItemForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="物料代码" prop="materiaCode">
              <el-input v-model="bomItemForm.materiaCode" readonly>
                <el-button slot="append" @click.prevent="selectMateria"
                  >选择物料</el-button
                >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="必选料" prop="required">
              <el-select
                v-model="bomItemForm.required"
                placeholder="是否必选料"
              >
                <el-option
                  v-for="($label, $value) in tableData.dict.required"
                  :key="$value"
                  :label="$label"
                  :value="$value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="Object.keys(materiaBomIds).length != 0">
          <el-form-item label="BOM版本选择" prop="materiaBomId">
            <el-select
              v-model="bomItemForm.materiaBomId"
              placeholder="请选择物料BOM版本"
            >
              <el-option
                v-for="($label, $value) in materiaBomIds"
                :key="$value"
                :label="$label"
                :value="$value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="物料名称">
            <el-input v-model="bomItemForm.materiaName" disabled></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="用量" prop="useNum">
              <el-input v-model="bomItemForm.useNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="损耗率" prop="lossRate">
              <el-input v-model="bomItemForm.lossRate"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="补给方式" prop="supplyType">
              <el-select
                v-model="bomItemForm.supplyType"
                placeholder="请选择补给方式"
              >
                <el-option
                  v-for="($label, $value) in tableData.dict.supplyType"
                  :key="$value"
                  :label="$label"
                  :value="$value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商" prop="supplierId">
              <el-select
                v-model="bomItemForm.supplierId"
                placeholder="请选择供应商"
              >
                <el-option
                  v-for="($label, $value) in materiaSupply"
                  :key="$value"
                  :label="$label"
                  :value="$value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          v-for="($label, $value) in tableData.dict.extField"
          :key="$value"
        >
          <el-form-item :label="$label">
            <el-input v-model="bomItemForm[$value]"></el-input>
          </el-form-item>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="bomItemDialog.visible = false">取 消</el-button>

        <el-button
          type="primary"
          :disabled="(submitButtonDisabled = false)"
          @click="submitBomItemForm"
          >保 存</el-button
        >
      </span>
    </el-dialog>

    <el-row style="height: 600px" :gutter="20">
      <!-- bom树结构列表 包含物料结构， -->
      <el-col :span="6">
        <el-row>
          <el-tooltip effect="light" content="新增同级产品">
            <el-button
              circle
              @click="addDir"
              icon="el-icon-plus"
              size="mini"
            ></el-button>
          </el-tooltip>
          <el-tooltip effect="light" content="新增子级产品">
            <el-button
              circle
              @click="addDirChild"
              icon="el-icon-folder-add"
              size="mini"
            ></el-button>
          </el-tooltip>
          <el-tooltip effect="light" content="编辑当前产品">
            <el-button
              circle
              @click="editDir"
              icon="el-icon-edit"
              size="mini"
            ></el-button>
          </el-tooltip>
        </el-row>

        <el-divider></el-divider>

        <el-row class="el-row-filter">
          <div id="dataPage" class="mytree">
            <el-scrollbar style="height: 100%">
              <el-tree
                size="mini"
                ref="bomTree"
                :data="data"
                id="el-tree"
                node-key="id"
                indent="0"
                :props="treeProps"
                :load="loadNode"
                highlight-current
                :expand-on-click-node="false"
                lazy
                :render-content="renderContent"
                @node-click="handleNodeClick"
              >
              </el-tree>
            </el-scrollbar>
          </div>
        </el-row>
      </el-col>
      <el-col :span="18">
        <el-tabs type="border-card">
          <el-tab-pane label="产品BOM">
            <el-row v-if="isShowSearch">
              <el-form :inline="true" size="mini">
                <el-form-item label="物料编码">
                  <el-input
                    v-model="searchform.materiaCode"
                    placeholder="物料编码"
                  ></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button plain @click="searchConfirm">查询</el-button>
                </el-form-item>
              </el-form>
            </el-row>

            <el-row style="margin-bottom: 5px">
              <el-tooltip effect="light" content="搜索">
                <el-button
                  circle
                  icon="el-icon-search"
                  @click="search"
                  size="mini"
                ></el-button>
              </el-tooltip>

              <el-tooltip effect="light" content="新增BOM">
                <el-button
                  circle
                  icon="el-icon-plus"
                  size="mini"
                  @click="addMateriaBom"
                ></el-button>
              </el-tooltip>

              <el-tooltip effect="light" content="导出扁平化BOM">
                <el-button
                  circle
                  icon="el-icon-document"
                  @click="doExportBom"
                  size="mini"
                ></el-button>
              </el-tooltip>

               <el-tooltip effect="light" content="导出普通BOM">
                <el-button
                  circle
                  icon="el-icon-document"
                  @click="doExportBomFlat"
                  size="mini"
                ></el-button>
              </el-tooltip>
            </el-row>

            <el-row v-if="bomTableData.length > 0">
              <!-- bom列表 -->
              <div>
                <el-table
                  size="mini"
                  :data="bomTableData"
                  @row-click="bomClickTableRow"
                  v-loading="loading"
                  border
                  max-height="300"
                  highlight-current-row
                >
                  <el-table-column label="" align width="45px">
                    <template slot-scope="scope">
                      <el-radio v-model="radio" :label="scope.$index">
                      </el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column prop="id" label="BOM-ID" width="70" />
                  <el-table-column prop="materiaCode" label="物料代码" />
                  <el-table-column prop="materiaName" label="物料名称" />
                  <el-table-column prop="specModel" label="规格型号">
                  </el-table-column>

                  <el-table-column prop="mainPicUrl" label="图片">
                    <template slot-scope="scope">
                      <el-popover trigger="click" placement="top">
                        <img
                          :src="scope.row.mainPicUrl"
                          style="width: auto; height: 400px"
                        />
                        <div slot="reference" class="name-wrapper">
                          <img
                            :src="scope.row.mainPicUrl"
                            min-width="70"
                            height="70"
                          />
                        </div>
                      </el-popover>
                    </template>
                  </el-table-column>

                  <el-table-column prop="version" label="BOM版本" />
                  <el-table-column
                    prop="useType"
                    :formatter="formatter"
                    label="BOM类型"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="status"
                    :formatter="formatter"
                    label="BOM状态"
                  >
                  </el-table-column>

                  <el-table-column label="相关附件">
                    <template slot-scope="scope">
                      <el-popover
                        trigger="hover"
                        v-if="
                          scope.row.attachEntityList &&
                          scope.row.attachEntityList.length > 0
                        "
                        width="200"
                        placement="top"
                      >
                        <el-table :data="scope.row.attachEntityList">
                          <el-table-column
                            prop="attachUrl"
                            :formatter="formatterLink"
                            label="下载地址"
                          />
                        </el-table>

                        <div slot="reference" class="name-wrapper">
                          <el-tag size="medium">{{
                            scope.row.attachEntityList &&
                            scope.row.attachEntityList.length > 0
                              ? "附件"
                              : "无"
                          }}</el-tag>
                        </div>
                      </el-popover>
                    </template>
                  </el-table-column>

                  <el-table-column prop="remark" label="备注">
                  </el-table-column>
                  <el-table-column
                    prop="createTime"
                    :formatter="formatterDate"
                    label="创建时间"
                  >
                  </el-table-column>

                  <el-table-column width="140" fixed="right" label="操作">
                    <template slot-scope="scope">
                      <el-tooltip effect="light" content="编辑BOM">
                        <el-button
                          circle
                          icon="el-icon-edit"
                          @click="handleBomEdit(scope.$index, scope.row)"
                          size="mini"
                        ></el-button>
                      </el-tooltip>

                      <el-tooltip effect="light" content="复制BOM">
                        <el-button
                          circle
                          icon="el-icon-document-copy"
                          @click="handleBomCopy(scope.$index, scope.row)"
                          size="mini"
                        ></el-button>
                      </el-tooltip>

                      <el-tooltip effect="light" content="添加附件">
                        <el-button
                          circle
                          icon="el-icon-tickets"
                          size="mini"
                          @click="handleMateriaBomAtts(scope.$index, scope.row)"
                        ></el-button>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <el-pagination
                style="float: right"
                layout="total"
                :total="bomTableData.length"
              >
              </el-pagination>
            </el-row>
          </el-tab-pane>
        </el-tabs>

        <el-tabs style="margin-top: 10px" type="border-card">
          <el-tab-pane label="产品BOM子项目">
            <el-row style="margin-bottom: 5px">
              <el-tooltip effect="light" content="新增BOM子项">
                <el-button
                  circle
                  icon="el-icon-plus"
                  size="mini"
                  @click="addMateriaBomItem"
                ></el-button>
              </el-tooltip>

              <el-tooltip effect="light" content="导入BOM">
                <el-button
                  circle
                  icon="el-icon-upload2"
                  @click="doImportBomOpen"
                  size="mini"
                ></el-button>
              </el-tooltip>
            </el-row>

            <el-row v-if="bomItemTableData.length > 0">
              <!-- bom-item列表 -->
              <div>
                <el-table
                  size="mini"
                  :data="bomItemTableData"
                  @row-click="bomItemClickTableRow"
                  v-loading="bomItemloading"
                  border
                  max-height="300"
                  highlight-current-row
                >
                  <el-table-column label="" align width="45px">
                    <template slot-scope="scope">
                      <el-radio v-model="bomItemradio" :label="scope.$index">
                      </el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column prop="materiaCode" label="物料代码">
                  </el-table-column>
                  <el-table-column prop="materiaName" label="物料名称">
                  </el-table-column>

                  <el-table-column prop="specModel" label="规格型号">
                  </el-table-column>

                  <el-table-column prop="mainPicUrl" label="图片">
                    <template slot-scope="scope">
                      <el-popover trigger="click" placement="top">
                        <img
                          :src="scope.row.mainPicUrl"
                          style="width: auto; height: 400px"
                        />
                        <div slot="reference" class="name-wrapper">
                          <img
                            :src="scope.row.mainPicUrl"
                            min-width="70"
                            height="70"
                          />
                        </div>
                      </el-popover>
                    </template>
                  </el-table-column>

                  <el-table-column prop="useNum" label="用量" />
                  <el-table-column
                    prop="unitOfMeasure"
                    :formatter="formatter"
                    label="计量单位"
                  >
                  </el-table-column>
                  <el-table-column prop="lossRate" label="损耗率" />

                  <el-table-column
                    prop="required"
                    :formatter="formatter"
                    label="必选料"
                  />

                  <el-table-column
                    prop="supplyType"
                    :formatter="formatter"
                    label="补给方式"
                  />

                  <el-table-column
                    prop="supplierId"
                    :formatter="formatter"
                    label="供应商"
                  />

                  <el-table-column label="BOM版本">
                    <template slot-scope="scope">
                      <el-popover
                        trigger="hover"
                        v-if="
                          scope.row.bomVersion &&
                          scope.row.bomVersion.length > 0
                        "
                        width="550"
                        placement="top"
                      >
                        <el-table :data="scope.row.bomItemList">
                          <el-table-column prop="materiaName" label="物料名称">
                          </el-table-column>

                          <el-table-column prop="useNum" label="用量" />

                          <el-table-column prop="lossRate" label="损耗率" />

                          <el-table-column
                            prop="required"
                            :formatter="formatter"
                            label="必选料"
                          />

                          <el-table-column
                            prop="supplyType"
                            :formatter="formatter"
                            label="补给方式"
                          />

                          <el-table-column
                            prop="supplierId"
                            :formatter="formatter"
                            label="供应商"
                          />
                        </el-table>

                        <div slot="reference" class="name-wrapper">
                          {{
                            scope.row.bomVersion ? scope.row.bomVersion : "无"
                          }}
                        </div>
                      </el-popover>
                    </template>
                  </el-table-column>

                  <el-table-column
                    v-for="($label, $value) in tableData.dict.extField"
                    :key="$value"
                    :prop="$value"
                    :label="$label"
                  />

                  <el-table-column
                    prop="createTime"
                    :formatter="formatterDate"
                    label="创建时间"
                  >
                  </el-table-column>

                  <el-table-column width="80" fixed="right" label="操作">
                    <template slot-scope="scope">
                      <el-tooltip effect="light" content="编辑Item">
                        <el-button
                          circle
                          icon="el-icon-edit"
                          @click="handleBomItemEdit(scope.$index, scope.row)"
                          size="mini"
                        ></el-button>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <el-pagination
                style="float: right"
                layout="total"
                :total="bomItemTableData.length"
              >
              </el-pagination>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import table from "@/assets/mixins/table";
import bomtreemenu from "@/assets/mixins/bomtreemenu";
import bomsubmit from "@/assets/mixins/bomsubmit";
import menuContext from "@/components/menuContext.vue";
import XLSX from "@/assets/utils/xlsx.full.min.js";

export default {
  mixins: [table, bomtreemenu, bomsubmit],
  components: {
    menuContext,
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 1000);
    setTimeout(() => {
      this.bomItemloading = false;
    }, 1000);
    setTimeout(() => {
      this.materialoading = false;
    }, 1000);
  },

  created() {
    this.$post("/materia/bom/tree/getListByParentId", {
      parentId: -1,
    }).then(({ data }) => {
      this.data = data.result;
    });

    this.initForm();
  },
  methods: {
    beforeRender(data) {
      this.tempfieldsData = data.dict.fieldList;
      this.fieldsData = this.tempfieldsData;
      return data;
    },
    selectChange(val) {
      console.log(val);
    },

    handleAttsSuccess(response, file, fileList) {
      let code = response.code;
      if (code === 1) {
        this.attform.attachUrl = response.url;
        this.attform.attachName = file.name;
      } else {
        this.$message.error("上传文件失败");
      }
      console.log(this.attform);
    },
    handleBomEdit(index, row) {
      console.log(index, row);
      this.bomForm.id = row.id;
      this.editMateriaBom();
    },

    handleBomItemEdit(index, row) {
      console.log(index, row);
      this.bomItemForm.id = row.id;
      this.editMateriaBomItem();
    },

    handleBomCopy(index, row) {
      console.log(index, row);

      this.$confirm("是否复制当前产品BOM?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.bomForm.id = row.id;
          this.copyBom();
        })
        .catch(() => {});
    },

    handleMateriaBomAtts(index, row) {
      console.log(index, row);
      this.tableRowData = row;
      //this.addMateriaAtts();
      this.addMateriaAtts();
    },
    doImportBomOpen() {
      this.$set(this.dynamicValidateForm, "fields", []);
      this.materiaImportList = [];
      this.fileBomList = [];

      //判断是否选择了bom
      if (
        this.bomItemForm.bomId === "undefined" ||
        this.bomItemForm.bomId === ""
      ) {
        this.$message.error("请选择对应的bom！");
        return;
      }

      this.materiaBomImportDialog.visible = true;
    },

    readExcel(file, fileList) {
      //读取excel所有列，并与数据列手动设置映射关系
      let _this = this;
      this.fileBomList = fileList.slice(-1);
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary",
          });
          let sheetInfos = workbook.Sheets[workbook.SheetNames[0]];
          //console.log(sheetInfos);
          let fromTo = "";
          let locations = []; // A1,B1,C1...

          fromTo = sheetInfos["!ref"]; // A1:B5
          // console.log("fromTo" + fromTo);
          // 该方法获取每列第一行的值，如：输入A1:B5，返回['A1','B1'],该方法详情可查看文章末尾的github具体代码
          locations = _this.getLocationsKeys(fromTo);
          console.log(locations);

          for (let i = 0; i < locations.length; i++) {
            if (typeof sheetInfos[locations[i]] != "undefined") {
              let value = sheetInfos[locations[i]].v;
              //console.log(locations[i], value);

              let obj = {
                label: value,
                value: locations[i],
              };

              this.dynamicValidateForm.fields.push(obj);
            }
          }

          let bomjson = {};

          this.materiaBomImport["bom"] = bomjson;

          this.materiaBomImport.bom["bomTreeId"] = this.thisformdata.id;
          this.materiaBomImport.bom["id"] = this.bomItemForm.bomId;

          // console.log(XLSX.utils.sheet_to_json(
          //   sheetInfos
          // ));

          let outdata = XLSX.utils.sheet_to_json(sheetInfos, {
            header: 1,
            defval: "",
            blankrows: false,
            rawNumbers: false,
          });
          // console.log(outdata);

          //组装json
          let arrs = [];

          for (var i = 3; i < outdata.length; i++) {
            let obj = {};
            for (var j = 0; j < outdata[i].length; j++) {
              let str = outdata[i][j].trim();
              obj[outdata[2][j]] = str;
            }
            arrs.push(obj);
          }

          // this.materiaBomImport["bomitems"] = XLSX.utils.sheet_to_json(
          //   sheetInfos,{header:1,defval:''}
          // );

          this.materiaBomImport["bomitems"] = arrs;

          //console.log( this.materiaBomImport["bomitems"]);
        } catch (error) {
          console.log(error);
          //this.$message.warning(error);
          return false;
        }
      };
      fileReader.readAsBinaryString(file.raw);
    },

    getLocationsKeys(range) {
      // A1:B5输出 A1,B1...
      let startString = range.split(":")[0];
      let endString = range.split(":")[1];

      let start = startString.substring(0, startString.length - 1); // 字符'A'
      let end = endString.substring(0, endString.length - 1);

      let total = 0;
      for (let i = 0; i < end.length; i++) {
        total +=
          Math.pow(26, end.length - 1 - i) *
          (end.charCodeAt(i) - "A".charCodeAt(0) + 1);
      }
      let result = [];
      for (let index = 0; index < total; index++) {
        result.push(this.getCharByNum(index) + "3"); //指定哪一行为表头数据，默认为第三行
      }

      return result;
    },

    getCharByNum(index) {
      let a = parseInt(index / 26); // 整除
      let b = index % 26; // 余数
      let returnChar = String.fromCharCode(b + 65); // 最后一个字符
      while (a > 0) {
        b = a % 26;
        a = parseInt(a / 26);
        // 从后生成字符，向前推进
        returnChar = String.fromCharCode(b + 65 - 1) + returnChar;
      }
      return returnChar;
    },

    doImportBom() {
      let bomItemArray = this.materiaBomImport["bomitems"];
      let resultBomItemArr = bomItemArray.map((item, index) => {
        let json = {};

        let arrs = Object.keys(item);
        //console.log(arrs);
        // console.log(this.dynamicValidateForm.fields);

        //console.log(this.fieldsData);
        // arrs.forEach((key) => {
        //   //查询对应的列名
        //   this.dynamicValidateForm.fields.forEach((item1, index) => {
        //     if (item1.label === key) {
        //       if (item1.hasOwnProperty("col")) {
        //         json[item1.col] = item[key];
        //       }
        //     }
        //   });
        // });

        // console.log("arrs" + arrs);

        arrs.forEach((key) => {
          //查询对应的列名
          this.fieldsData.forEach((item1, index) => {
            if (item1.hasOwnProperty("col")) {
              if (item1.col === key) {
                json[item1.fieldCode] = item[key];
                //console.log("item",item1);
              }
            }
          });
        });
        json["rowNum"] = index + 2;
        return json;
      });
      this.materiaBomImport["bomitems"] = resultBomItemArr;
      this.loading = true;
      this.$post(
        "/materia/bom/doImport",
        { materiaBomStr: JSON.stringify(this.materiaBomImport) },
        {}
      )
        .then((res) => {
          if (res && res.code && res.code == 1) {
            if (res.msg && res.msg != "") {
              this.$alert(res.msg, {
                dangerouslyUseHTMLString: true,
              });
            } else {
              this.$message.success("物料bom导入成功！");
            }

            this.$post("/materia/bom/item/list", {
              "query.bomId": this.bomItemForm.bomId,
            }).then(({ data }) => {
              this.bomItemTableData = data.result;
            });
            this.materiaBomImportDialog.visible = false;
          } else {
            this.$message.info(res.msg);
          }

          this.materiaBomImport = {};
          this.$set(this.dynamicValidateForm, "fields", []);

          this.fieldsData.forEach((item1, index) => {
            if (item1.hasOwnProperty("col")) {
              delete item1.col;
            }
          });
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
          this.materiaBomImport = {};
          this.$set(this.dynamicValidateForm, "fields", []);
          this.fieldsData.forEach((item1, index) => {
            if (item1.hasOwnProperty("col")) {
              delete item1.col;
            }
          });
          this.$message.error(error.message);
        });
    },

    doExportBom() {
      if (!this.bomForm.id) {
        this.$message.info("选择需要导出的BOM！");
        return;
      }

      this.loading = true;
      this.$post("/materia/bom/doExport", { id: this.bomForm.id }, {})
        .then((res) => {
          if (res && res.code && res.code == 1) {
            let path = res.path;

            if (path != null) {
              window.open(path);
            }
          }
          this.loading = false;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
      this.materiaBomImportDialog.visible = false;
    },

    doExportBomFlat() {
      if (!this.bomForm.id) {
        this.$message.info("选择需要导出的BOM！");
        return;
      }

      this.loading = true;
      this.$post("/materia/bom/doExport", { id: this.bomForm.id ,type:2}, {})
        .then((res) => {
          if (res && res.code && res.code == 1) {
            let path = res.path;

            if (path != null) {
              window.open(path);
            }
          }
          this.loading = false;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
      this.materiaBomImportDialog.visible = false;
    },

    copyBom() {
      if (this.bomForm.id == null) {
        this.$message.info("请选择需要复制的bom！");
        return;
      }

      this.loading = true;
      this.$post("/materia/bom/copyBom", { id: this.bomForm.id }, {})
        .then((res) => {
          if (res && res.code && res.code == 1) {
            this.$message.success("物料bom复制成功！");

            //添加成功 刷新树节点和table
            this.$post("/materia/bom/tree/queryBoms", {
              id: this.bomForm.bomTreeId,
            }).then(({ data }) => {
              this.loading = false;
              this.bomTableData = data.bomList;
            });
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch((error) => {
          this.loading = false;
          this.$message.error(error.message);
        });
      this.visible = false;
    },

    selectMateria() {
      //清空物料选择弹窗搜索条件
      this.searchform = {};
      this.bomItemDialog.innerVisible = true;
      this.$nextTick(() => {
        this.$post("/materia/category/getListByParentId", {
          parentId: -1,
          type: 0,
        }).then(({ data }) => {
          this.materiaData = data.result;
        });
      });
    },
    selectBomMateria() {
      //清空物料选择弹窗搜索条件
      this.searchform = {};
      this.bomDialog.innerVisible = true;
      this.$nextTick(() => {
        this.$post("/materia/category/getListByParentId", {
          parentId: -1,
          type: 0,
        }).then(({ data }) => {
          this.materiaData = data.result;
        });
      });
    },
    selectBomDirMateria() {
      //清空物料选择弹窗搜索条件
      this.searchform = {};
      this.bomDirDialog.innerVisible = true;
      this.$nextTick(() => {
        this.$post("/materia/category/getListByParentId", {
          parentId: -1,
          type: 0,
        }).then(({ data }) => {
          this.materiaData = data.result;
        });
      });
    },
    async loadMateriaNode(node, resolve) {
      if (node.level === 0) {
        resolve(this.materiaData);
        return;
      }

      if (node.data.type === 1) {
        resolve(node.data.children);
        return;
      } else if (node.data.type == 2) {
        //物料
      }
      this.$post("/materia/category/getDirListByParentId", {
        parentId: node.data.id,
        type: node.data.type,
      }).then(({ data }) => {
        resolve(data.result);
      });
    },
    //BOMItem物料选择弹窗
    handleMateriaNodeClick(data) {
      console.log("materiaHandleNodeClick", data);
      if (data.type == 2) {
        this.$post("/materia/view", {
          id: data.id,
        }).then(({ data }) => {
          data.entity = this.util_toString(data.entity, this.toString);

          this.bomItemForm.materiaCode = data.entity.code;
          this.bomItemForm.materiaName = data.entity.name;
          this.bomItemForm.useNum = data.entity.useNum;
          this.bomItemForm.lossRate = data.entity.lossRate;
          this.bomItemForm.supplyType = data.entity.supplyType;

          this.materiaData = [];
          this.materiaSupply = {};

          //根据物料id获取供应商
          this.$post("/materia/bom/item/materiaSupply", {
            id: data.entity.id,
          })
            .then((res) => {
              if (res && res.code && res.code == 1) {
             
                // if (Object.keys(res.materiaSupply).length == 0) {
                //   this.$message.info(
                //     "当前物料未配置供应商，请配置物料供应后再选择！"
                //   );
                //   return;
                // }
                this.materiaSupply = res.materiaSupply;
              }
            })
            .catch((error) => {
              this.$message.error(error.message);
            });
        });
        this.bomItemDialog.innerVisible = false;
      }
    },

    //BOM物料选择弹窗
    async handleMateriaBomNodeClick(data) {
      console.log("handleMateriaBomNodeClick", data);
      this.searchform = {};
      this.thisformdata = data; //按需展示不同的按钮
      this.materialoading = true;
      if (data.type == 0) {
        this.categoryId = data.id;
        const query = {
          "query.categoryId": data.id,
          "query.enabled": 1,
          "pageInfo.currPage": this.materiaTable.currPage,
          "pageInfo.prePageResult": this.materiaTable.prePageResult,
        };
        this.$post("/materia/list", query).then(({ data }) => {
          this.materiaTableData = data.result;
          this.materiaTable.currPage = data.pageInfo.currPage;
          this.materiaTable.prePageResult = data.pageInfo.prePageResult;
          this.materiaTable.totalResult = data.pageInfo.totalResult;

          this.materialoading = false;
        });
      }
    },

    renderMateriaContent: function (h, { node, data, store }) {
      return (
        <span>
          <i style="font-size:16px;color:#409EFF" class={data.icon}></i>
          <span style="padding-left: 2px;font-size:14px">{node.label}</span>
        </span>
      );
    },

    getTargetElement(v) {
      this.targetElement = v;
    },
    search() {
      console.log(this.isShowSearch);
      if (this.isShowSearch) {
        this.isShowSearch = false;
      } else {
        this.isShowSearch = true;
      }
    },

    searchConfirm() {
      this.loading = true;
      this.$post("/materia/bom/list", {
        "query.materiaCode": this.searchform.materiaCode,
      }).then(({ data }) => {
        this.bomTableData = data.result;
        this.loading = false;
      });
    },

    renderContent: function (h, { node, data, store }) {
      return (
        <span>
          <i style="font-size:16px;color:#409EFF" class={data.icon}></i>
          <span style="padding-left: 2px;font-size:14px">{node.label}</span>
        </span>
      );
    },

    refreshNodeBy(id) {
      let node = this.$refs.bomTree.getNode(id); // 通过节点id找到对应树节点对象
      node.loaded = false;
      node.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
    },
    async loadNode(node, resolve) {
      if (node.level === 0) {
        return;
      }

      this.$post("/materia/bom/tree/getListByParentId", {
        parentId: node.data.id,
      }).then(({ data }) => {
        resolve(data.result);
        this.bomTableData = data.hasOwnProperty("bomList") ? data.bomList : [];
      });
    },

    handleNodeClick(data, node, obj) {
      console.log("node click", data, node);
      this.node = node;
      let type = data.type;
      this.thisformdata = data;
      this.loading = true;
      if (type === 0) {
        console.log("目录");
        this.bomTreeId = data.id;
        this.$post("/materia/bom/tree/queryBoms", {
          id: data.id,
        }).then(({ data }) => {
          this.bomTableData = data.bomList;
          this.bomItemTableData = [];
          this.loading = false;
        });
      } else if (type === 1) {
        //刷新bom-item 和bom table 此时bom table 单条数据
        console.log("bom");
        this.isChildDir = false;

        this.bomItemForm.bomId = data.bomId;
        this.bomTreeId = data.parentId;
        this.$post("/materia/bom/tree/queryBomById", {
          id: data.bomId,
        }).then(({ data }) => {
          this.bomTableData = data.bomList;
          this.bomItemTableData = [];
          this.loading = false;
          // this.bomItemTableData = data.bomItemList;

          // console.log("bomTreeId:" + this.bomTreeId);
        });
      } else if (type === 2) {
        //刷新bom-item列表
        console.log("bom-item");
        return;
      }
      //根据节点类型不同，刷新table 列表
      // console.log("bomtreeid" + this.bomTreeId);
      this.nodeData = data;
    },

    //bom table的左键点击当前行事件
    bomClickTableRow(row, column, event) {
      console.log("table row click ", row);
      // var menu = document.querySelector("#bomMenu");
      // menu.style.display = "none";
      // console.log(row,column,event)
     
      this.bomTableData.forEach((item, index) => {
        if (row.id === item.id) {
          this.radio = parseInt(index) + 1;
          this.bomItemloading = true;
          console.log("change radio" + index);
          this.radio = index;
          this.$post("/materia/bom/item/list", {
            "query.bomId": row.id,
          }).then(({ data }) => {
            this.bomItemTableData = data.result;
            this.bomItemForm.bomId = row.id;
            this.bomItemloading = false;
          });

          this.$post("/materia/bom/view", {
            id: row.id,
          }).then(({ data }) => {
            data.entity = this.util_toString(data.entity, this.toString);
            this.bomForm = Object.assign({}, this.bomForm, data.entity);
          });
        }
      });
    },

    //bom table的左键点击当前行事件
    bomItemClickTableRow(row, column, event) {
      console.log("table row click " + row.id);
      // console.log(row,column,event)
      this.bomItemTableData.forEach((item, index) => {
        if (row.id === item.id) {
          console.log("change radio" + index);
          this.bomItemradio = index;
          this.bomItemForm.id = row.id;
        }
      });
    },
    // BOM table的左键点击当前行事件
    clickTableBomRow(row, column, event) {
      console.log("clickTableBomRow row=", row);

      row = this.util_toString(row, this.toString);
      this.bomForm.materiaCode = row.code;
      this.bomForm.materiaId = row.id;
      this.bomForm.materiaName = row.name;
      //将物料选择弹窗列表置空
      this.materiaTableData = [];
      this.bomDialog.innerVisible = false;
    },
    // BOM Item table的左键点击当前行事件
    clickTableBomItemRow(row, column, event) {
      console.log("clickTableBomItemRow row=", row);

      row = this.util_toString(row, this.toString);
      this.bomItemForm.materiaCode = row.code;
      this.bomItemForm.materiaName = row.name;
      this.bomItemForm.useNum = row.useNum;
      this.bomItemForm.lossRate = row.lossRate;
      this.bomItemForm.supplyType = row.supplyType;

      this.materiaSupply = {};
      this.materiaBomIds = {};
      //将物料选择弹窗列表置空
      this.materiaTableData = [];
      //根据物料id获取供应商
      this.$post("/materia/bom/item/materiaSupply", {
        id: row.id,
      })
        .then((res) => {
          if (res && res.code && res.code == 1) {
            // console.log(res);
            // if (Object.keys(res.materiaSupply).length == 0) {
            //   this.bomItemForm.materiaCode = "";
            //   this.bomItemForm.materiaName = "";
            //   this.bomItemForm.useNum = "";
            //   this.bomItemForm.lossRate = "";
            //   this.bomItemForm.supplyType = "";
            //   this.bomItemForm.supplierId = "";
            //   this.$message.warning(
            //     "当前物料未配置供应商，请配置物料供应后再选择！"
            //   );
            //   return;
            // }
            this.materiaSupply = res.materiaSupply;
            this.materiaBomIds = res.materiaBomIds;
          }
        })
        .catch((error) => {
          this.$message.error(error.message);
        });

      this.bomItemDialog.innerVisible = false;
    },

    clickTableBomDirRow(row, column, event) {
      console.log("clickTableBomDirRow row=", row);

      row = this.util_toString(row, this.toString);
      this.bomDirForm.materiaId = row.id;
      this.bomDirForm.materiaName = row.name;
      this.bomDirDialog.innerVisible = false;
    },

    handleSizeChange(currSize) {
      console.log("currSize=" + currSize);
      this.materiaTable.prePageResult = currSize;
      this.getMateriaTableData();
    },
    handleCurrentChange(currPage) {
      console.log("currPage=" + currPage);
      this.materiaTable.currPage = currPage;
      this.getMateriaTableData();
    },
    //刷新选择物料弹窗 物料列表
    getMateriaTableData() {
      //初始花query:默认查询启用物料
      const query = {
        "query.enabled": 1,
        "pageInfo.currPage": this.materiaTable.currPage,
        "pageInfo.prePageResult": this.materiaTable.prePageResult,
      };
      ////弹窗物料列表搜索条件类目ID
      if (this.categoryId) {
        query["query.categoryId"] = this.categoryId;
      }
      //弹窗物料列表搜索条件code
      if (this.searchform.code) {
        query["query.code"] = this.searchform.code;
      }
      //弹窗物料列表搜索条件name
      if (this.searchform.name) {
        query["query.name"] = this.searchform.name;
      }
      console.log(query);
      this.$post("/materia/list", query).then(({ data }) => {
        this.materiaTableData = data.result;
        this.materiaTable.currPage = data.pageInfo.currPage;
        this.materiaTable.prePageResult = data.pageInfo.prePageResult;
        this.materiaTable.totalResult = data.pageInfo.totalResult;
      });
    },
    //弹窗物料列表搜索事件-查询
    materiaTablesearchConfirm() {
      this.categoryId = "";
      this.getMateriaTableData();
    },
    //弹窗物料列表搜索事件-清空
    materiaTablesearchClear() {
      this.categoryId = "-1";
      this.searchform = {};
      this.getMateriaTableData();
    },
  },
  data() {
    return {
      //物料列表数据
      materiaTableData: [],
      //物料列表搜索条件
      searchform: {
        code: "",
        name: "",
        materiaCode: "",
      },
      materiaTable: {
        totalResult: "",
        prePageResult: "",
        currPage: "",
      },
      submitButtonDisabled: false,
      categoryId: "",
      formLabelWidth: "120px",
      formInputWidth: "20",
      radio: null,
      loading: false,
      bomTableData: [],
      currentRowIndex: 0, // 获取当前右键点击的table行下标
      menuVisible: false,
      bomItemMenus: ["复制", "编辑", "删除"],
      bomItemRadio: null,
      bomItemloading: false,
      materialoading: false,
      bomItemTableData: [],
      bomItemCurrentRowIndex: 0, // 获取当前右键点击的table行下标
      bomDirDialog: {
        visible: false,
        innerVisible: false,
      },
      bomDialog: {
        visible: false,
        innerVisible: false,
      },
      bomItemDialog: {
        visible: false,
        innerVisible: false,
      },
      materiaAttsDialog: {
        visible: false,
      },
      materiaBomImportDialog: {
        visible: false,
        syncRet: "",
      },
      formLabelWidth: "120px",
      formInputWidth: "20",
      contextMenuTarget: null,
      contextMenuVisible: false,
      nodeData: {},
      data: [],
      bomTreeId: "",
      materiaData: [],
      fieldsData: [],
      tempfieldsData: [],
      tree: [],
      materiaSupply: {},
      materiaBomIds: {},
      form: {},
      dict: {},
      materiaBomImport: {},
      bomItems: [],
      currProduct: {},
      treeProps: {
        children: "children",
        label: "name",
        isLeaf: "isLeaf",
        type: "type",
        icon: "icon",
        bomId: "bomId",
        id: "id",
        materiaId: "materiaId",
      },
      visible: false,
      treeMateriaProps: {
        children: "children",
        label: "name",
        isLeaf: "isLeaf",
        type: "type",
        icon: "icon",
        id: "id",
      },

      isChildDir: false, //刷新标志
      isShowDrop: false, //右键菜单的是否显示
      contextMenuTarget: null, //右键菜单的DOM对象
      thisformdata: {}, //右键菜单的点击的节点对象
      targetElement: {}, //右键点击的目标对象
      isShowSearch: false,
      node: {},
      resolve: [],
      dynamicValidateForm: {
        fields: [],
      },
    };
  },
};
</script>
<style>
.el-row-filter {
  max-height: 600px;
}


.mytree{
   width: 450px;

}

#dataPage {
  margin: 0 0;
  font-family: "Microsoft Yahei", "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
}

.el-radio__label {
  display: none !important;
}

.el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
  white-space: nowrap;
  overflow-y: hidden;
}
.el-dialog__body {
  display: flex;
}

.mytree .el-scrollbar .el-scrollbar__wrap {
        overflow-x: hidden;
    }

</style>


<style lang="scss" scoped>


.mytree /deep/ {
  .el-tree--highlight-current
    /deep/
    .el-tree-node.is-checked
    > .el-tree-node__content {
    background-color: rgb(255, 255, 255);
    color: rgb(64, 158, 255);
  }

  // .el-tree-node__content {
  //       height: 32px;
  //       padding-left: 0px !important;
  // }

  .el-tree--highlight-current
    /deep/
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: rgb(255, 255, 255);
    color: rgb(64, 158, 255);
  }
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  // .el-tree-node__expand-icon.is-leaf {
  //   display: none;
  // }
  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>
