<template>
  <div class="examination">
    <div class="common-head-search">
      <el-form :inline="true" @submit.native.prevent>
        <el-form-item label="仓库类型">
          <el-select
            v-model="search.strTypeCode"
            clearable
            filterable
            collapse-tags
            size="small"
            style="width: 200px"
            placeholder="请选择查询内容"
          >
            <el-option
              v-for="item in strType"
              :key="item.baseCode"
              :label="item.baseName"
              :value="item.baseCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓库名称">
          <el-input
            v-model="search.strName"
            @keyup.enter.native="searchData()"
            size="small"
            placeholder="请输入查询内容"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            type="goon"
            size="mini"
            @click="searchData"
            >查询</el-button
          >
          <el-button
            icon="el-icon-refresh"
            type="info"
            plain
            size="mini"
            @click="reset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-row>
      <el-col :span="6">
        <div
          style="
            padding-left: 30px;
            padding-top: 20px;
            border-right: 1px solid rgb(233, 231, 231);
            border-bottom: 1px solid rgb(233, 231, 231);
            min-width: 240px;
          "
          :style="`height:${height_top}px`"
        >
          <div class="common-title-name">
            <img
              style="width: 25px; height: 25px"
              src="../../../../assets/img/imgScreen/logo.png"
            />
            导航树
          </div>
          <el-tree
            v-loading="treeLoading"
            ref="baseDataTree"
            :props="props"
            :data="baseDataTree"
            highlight-current
            node-key="id"
            @node-click="nodeClick"
            :style="`height:${height_top}px`"
          >
          </el-tree>
        </div>
      </el-col>
      <el-col :span="18">
        <el-row>
          <el-col>
            <div class="common-title-div">
              <div class="common-title-name">
                <img
                  style="width: 25px; height: 25px"
                  src="../../../../assets/img/imgScreen/logo.png"
                />
                仓库信息
              </div>
              <div>
                <el-button
                  icon="el-icon-circle-plus-outline"
                  type="goon"
                  size="mini"
                  @click="addShow"
                  >新增</el-button
                >
                <el-button
                  icon="el-icon-edit"
                  type="goon"
                  size="mini"
                  @click="modify"
                  >修改</el-button
                >
                <el-button
                  icon="el-icon-circle-close"
                  type="danger"
                  size="mini"
                  @click="deleteData"
                  >停用</el-button
                >
                <el-button
                  icon="el-icon-check"
                  type="goon"
                  size="mini"
                  @click="recoverData"
                  >启用</el-button
                >
                <el-button
                  icon="el-icon-check"
                  type="goon"
                  size="mini"
                  @click="storePrint"
                  :loading="printLoading"
                  >打印条码</el-button
                >
              </div>
            </div>
            <div>
              <el-table
                v-loading="dataLoading"
                ref="dataTable"
                border
                :height="height_top2"
                @row-click="checkRow"
                @selection-change="selectedChange"
                highlight-current-row
                :data="table.list"
                :icore-filter-flag="icoreFilterFlag"
                :header-cell-style="tableHeaderCellStyle"
                :row-class-name="tableRowClassName"
                :summary-method="getSummaries"
                show-summary
              >
                <el-table-column
                  type="index"
                  label="NO"
                  fixed="left"
                  align="center"
                ></el-table-column>
                <el-table-column
                  type="selection"
                  fixed="left"
                  align="center"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  min-width="100px"
                  prop="strNo"
                  label="仓库编码"
                  align="center"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  min-width="110px"
                  prop="strName"
                  label="仓库名称"
                  align="center"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  min-width="80px"
                  prop="sortNo"
                  label="父键编码"
                  align="center"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  min-width="80px"
                  prop="layer"
                  label="层数"
                  align="center"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  min-width="80px"
                  prop="colwidth"
                  label="列数"
                  align="center"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  min-width="80px"
                  prop="strTypeName"
                  label="仓库类型"
                  align="center"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  min-width="80px"
                  prop="levelNum1"
                  label="仓库属性"
                  align="center"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  min-width="100px"
                  prop="strDesc"
                  label="仓库描述"
                  align="center"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  min-width="100px"
                  prop="companyName"
                  label="公司名称"
                  align="center"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  min-width="100px"
                  prop="deptName"
                  label="部门名称"
                  align="center"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  min-width="100px"
                  prop="sectionName"
                  label="班组名称"
                  align="center"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  min-width="80px"
                  prop="validFlag1"
                  label="数据状态"
                  align="center"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  min-width="80px"
                  prop="memo"
                  label="备注"
                  align="center"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  min-width="165px"
                  prop="createTime"
                  label="创建时间"
                  align="center"
                ></el-table-column>
                <el-table-column
                  sortable
                  :show-overflow-tooltip="true"
                  min-width="95px"
                  prop="createMan"
                  label="创建人"
                  align="center"
                ></el-table-column>
              </el-table>
            </div>
            <div class="common-foot-style">
              <el-pagination
                v-loading="dataLoading"
                @size-change="pageSizeChange"
                @current-change="pageCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[10, 20, 50, 100, 200]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.totalPage"
                background
              >
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog
      @close="closeDialog"
      :visible.sync="dialogTableVisible"
      width="70%"
    >
      <div slot="title" class="titleBox">
        <i
          :class="tableType === 0 ? 'el-icon-document' : 'el-icon-edit-outline'"
          style="font-size: 20px"
        ></i>
        <!-- <img style="width: 25px; height: 25px" src='../../../../assets/img/imgScreen/more.png' /> -->
        <span style="margin-left: 10px; font-size: 18px">{{
          tableTypeDsc
        }}</span>
      </div>
      <el-form
        ref="baseData"
        label-width="80px"
        :rules="ruleValidate"
        :model="baseData"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item prop="levelNum" label="仓库属性">
              <el-select
                v-model="baseData.levelNum"
                disabled
                filterable
                style="width: 100%"
                collapse-tags
                size="small"
              >
                <el-option
                  v-for="(item, index) in levelNumType"
                  :key="index"
                  :label="item.levelNum"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="strTypeCode" label="仓库类型">
              <el-select
                v-model="baseData.strTypeCode"
                style="width: 100%"
                filterable
                collapse-tags
                size="small"
              >
                <el-option
                  v-for="(item, index) in strType"
                  :key="index"
                  :label="item.baseName"
                  :value="item.baseCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="strDesc" label="仓库描述">
              <el-input
                v-model="baseData.strDesc"
                style="width: 100%"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item prop="strName" label="仓库名称">
              <el-input
                v-model="baseData.strName"
                style="width: 100%"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="层高">
              <el-input
                v-model="baseData.layer"
                style="width: 100%"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="列宽">
              <el-input
                v-model="baseData.colwidth"
                style="width: 100%"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item prop="companyName" label="公司名称">
              <el-select
                v-model="baseData.companyNo"
                filterable
                style="width: 100%"
                collapse-tags
                @change="selectDepartment"
                size="small"
              >
                <el-option
                  v-for="item in companyNameType"
                  :key="item.orgCode"
                  :label="item.orgName"
                  :value="item.orgCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="sectionName" label="部门名称">
              <el-select
                v-model="baseData.deptNo"
                filterable
                style="width: 100%"
                @change="selectClass"
                collapse-tags
                size="small"
              >
                <el-option
                  v-for="item in sectionNameType"
                  :key="item.orgCode"
                  :label="item.orgName"
                  :value="item.orgCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="deptName" label="班组名称">
              <el-select
                v-model="baseData.sectionNo"
                style="width: 100%"
                filterable
                collapse-tags
                size="small"
              >
                <el-option
                  v-for="item in sectionClass"
                  :key="item.orgCode"
                  :label="item.orgName"
                  :value="item.orgCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="memo" label="备注">
              <el-input
                v-model="baseData.memo"
                style="width: 100%"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="goon"
          size="mini"
          icon="el-icon-check"
          @click="tableType === 0 ? addData() : modifyData()"
          >确定</el-button
        >
        <el-button
          size="mini"
          type="goon"
          icon="el-icon-remove-outline"
          @click="cancel"
          >取消</el-button
        >
      </span>
    </el-dialog>
    <div
      id="printContainer2"
      style="margin-left: 20px; margin-top: 3px"
      v-show="false"
    >
      <div id="printContent">
        <div style="width: 750px;">
          <div
          v-for="(item, index) in printData"
          :key="item.id"
          style="width: 350px; display:inline-block!important; border: 1px solid #fff; position: relative;margin-top: 45px;"
        >
          <div style="margin-top: 3px">
            <div style="font-size: 18px; margin-left: 0px;text-align:center;">
              {{ item.strName }}
            </div>
          </div>
          <div style="text-align: center; margin-bottom: 0">
            <img width="88%" :id="`barcode${item.id}`" />
          </div>
          <div :style="(index + 1) % 12 === 0 ? 'page-break-after: always' : ''"></div>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getCookie
} from '@/utils/util.js';
import {
  cookieUserId,
  cookieUserName
} from '@/config/config.js';
let userName = getCookie(cookieUserName);
let userId = getCookie(cookieUserId);
import JsBarcode from 'jsbarcode'

export default {
  data () {
    return {
      baseDataTree: [],
      selectBaseCodeNo: '',
      selectBaseItem: {},
      table: {
        list: []
      },
      treeLoading: false,
      dialogTableVisible: false,
      tableTypeDsc: '新增仓库信息',
      tableType: 0,
      levelNumType: [
        { id: '0', levelNum: '仓库' },
        { id: '1', levelNum: '货架' },
        { id: '2', levelNum: '货位' }
      ],
      strType: [],
      companyNameType: [],
      sectionNameType: [],
      sectionClass: [],
      ruleValidate: {
        strName: [{ required: true, message: '该项不能为空', trigger: 'change' }],
        strTypeCode: [{ required: true, message: '该项不能为空', trigger: 'change' }],
        levelNum: [{ required: true, message: '该项不能为空', trigger: 'change' }],
        companyNo: [{ required: true, message: '该项不能为空', trigger: 'change' }]
      },
      baseData: {},
      props: {
        label: (data, node) => {
          return data.strName
        },
      },
      dataLoading: false,
      icoreFilterFlag: true,
      page: {
        pageSize: 50,
        pageNum: 1,
        totalPage: 0
      },
      showFlag: false,
      rowData: {},
      Params: {},
      Params2: {},
      multipleSelection: [],
      search: {
        strTypeName: '',
        strName: ''
      },
      height_top: 0,
      height_top2: 0,
      printData: [],
      printLoading: false,
      selectedList: []
    }
  },
  created () {
    this.height_top = window.innerHeight - 130;
    this.height_top2 = window.innerHeight - 170;
  },
  mounted () {
    //获取公司
    this.axios.post("pass/baseManagement/v1/sysorgs/querySysOrgCompanyAll", {}, { individualType: 'json' }).then(response => {
      this.companyNameType = response.data
    });
    //获取仓库类型
    this.axios.post("pass/baseManagement/v1/limsbaseinfos/queryBaseInfoByBaseCode", { validFlag: 1, baseCode: 4833 }, { individualType: 'json' }).then(res => {
      this.strType = res.data;
    }).catch(e => {
    });
    // this.getDataList ();
    this.addScreen();
    this.getBaseDataList2();
    this.getDataList()
  },
  methods: {
    getSummaries (param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
        }
        if (index === 1) {
          sums[index] = data.length;
        }
      });
      return sums;
    },
    getCode (code, arr, codeKey, nameKey) {
      if (!code) {
        return '';
      }
      let targetRow = arr.find(item => {
        return item[codeKey] === code;
      });
      // console.log(targetRow, 'targetRow');
      return targetRow ? targetRow[nameKey] : '';
    },
    //根据选中的公司，查询部门名称数据
    selectDepartment (val) {
      this.sectionNameType = []
      this.companyNameType.find(item => {
        if (val === item.orgCode) {
          this.sectionNameType = item.sysOrgList
        }
      })
    },
    //根据选中的部门名称，查询班组名称
    selectClass (val) {
      this.sectionClass = []
      this.sectionNameType.find(item => {
        if (val === item.orgCode) {
          this.sectionClass = item.sysOrgList
        }
      })
    },
    //显示弹出窗
    addShow () {
      if (this.selectBaseItem.levelNum == 2) {
        this.$message.warning('已经是最后一层，不能再往下新增菜单了')
        return
      }
      this.baseData = Object.assign({}, { sortNo: this.selectBaseItem.strNo ? this.selectBaseItem.strNo : '' })
      this.baseData.levelNum = this.selectBaseItem.levelNum == 0 ? "1" : this.selectBaseItem.levelNum == 1 ? "2" : "0"
      this.tableType = 0;
      this.tableTypeDsc = '新增仓库信息';
      this.dialogTableVisible = true;
    },
    //修改仓库信息弹出框
    modify () {
      if (JSON.stringify(this.rowData) === "{}") {
        this.$message.warning('请先点击选中一条您要修改的数据')
        return
      }
      this.baseData = Object.assign({}, this.rowData)
      this.tableType = 1;
      this.tableTypeDsc = '修改仓库信息';
      this.selectDepartment(this.baseData.companyNo)
      this.selectClass(this.baseData.deptNo)
      this.dialogTableVisible = true;
    },
    checkRow (row) {
      this.rowData = Object.assign({}, row)
    },
    //新增确定操作
    addData () {
      let _this = this;
      _this.tableData = [];
      _this.$refs['baseData'].validate((valid) => {
        if (valid) {
          _this.baseData.createMan = userName;
          _this.baseData.createNo = userId;
          _this.baseData.companyName = this.getCode(this.baseData.companyNo, this.companyNameType, 'orgCode', 'orgName')
          _this.baseData.deptName = this.getCode(this.baseData.deptNo, this.sectionNameType, 'orgCode', 'orgName')
          _this.baseData.sectionName = this.getCode(this.baseData.sectionNo, this.sectionClass, 'orgCode', 'orgName')
          _this.baseData.strTypeName = this.getCode(this.baseData.strTypeCode, this.strType, 'baseCode', 'baseName')
          _this.axios.post('pass/baseManagement/v1/limsbasestorages/saveLimsBaseStorage', _this.baseData, { individualType: 'json' }).then(res => {
            if (res.succeed) {
              _this.dialogTableVisible = false;
              this.rowData = {}
              this.$message.success('添加成功')
              this.getBaseDataList2()
            } else {
              this.$message.error(res.message)
            }
          }).catch(e => {
            this.$message.error(e.message)
          })
        }
      })
    },
    //修改确定操作
    modifyData () {
      let _this = this;
      _this.tableData = [];
      _this.$refs['baseData'].validate((valid) => {
        if (valid) {
          _this.baseData.companyName = this.getCode(this.baseData.companyNo, this.companyNameType, 'orgCode', 'orgName')
          _this.baseData.deptName = this.getCode(this.baseData.deptNo, this.sectionNameType, 'orgCode', 'orgName')
          _this.baseData.sectionName = this.getCode(this.baseData.sectionNo, this.sectionClass, 'orgCode', 'orgName')
          _this.baseData.strTypeName = this.getCode(this.baseData.strTypeCode, this.strType, 'baseCode', 'baseName')
          _this.axios.post('pass/baseManagement/v1/limsbasestorages/saveLimsBaseStorage', _this.baseData, { individualType: 'json' }).then(res => {
            if (res.succeed) {
              _this.dialogTableVisible = false;
              this.$message.success('修改成功')
              this.searchData()
              this.getBaseDataList2()
            } else {
              this.$message.error(res.message)
            }
          }).catch(e => {
            this.$message.error(e.message)
          })
        }
      })
    },
    renderHeader (h) {
      return (
        <div style="cursor: pointer ;line-height:10px" onClick={() => this.addRow()}>
          <i class="el-icon-plus" style="font-size:10px; color:rgb(18, 51, 143)"></i>
        </div>
      )
    },
    // 表格多选
    selectedChange (list) {
      this.selectedList = [...list]
    },
    // 打印仓库条码
    storePrint () {
      if (this.selectedList.length === 0) {
        return this.$message.warning('请先勾选一条您要打印条码的仓库数据')
      }
      this.printLoading = true
      this.printData = [...this.selectedList]
      this.runPrint(this.printData)
    },
    // 生成条码
    runPrint (arr) {
      setTimeout(() => {
        arr.forEach(item => {
          JsBarcode(`#barcode${item.id}`, item.strNo, {
            format: 'CODE128',
            lineColor: '#000',
            background: '#fff',
            width: 1,
            height: 15,
            displayValue: false
          })
        })
        setTimeout(() => {
          this.printCode()
        }, 1500)
      }, 100);
    },
    // 打印
    printCode () {
      var iframe = document.createElement('iframe');
      document.body.appendChild(iframe);
      var doc = iframe.contentWindow.document;
      doc.write('<div>' + $('#printContent').html() + '</div>');
      doc.close();
      iframe.contentWindow.focus();
      iframe.contentWindow.document.execCommand('print');
      document.body.removeChild(iframe);
      this.printLoading = false
      var t = setTimeout(() => {
        clearTimeout(t)
      }, 500)
    },
    closeDialog () {
      this.baseData = {}
    },
    cancel () {
      this.baseData = {}
      this.dialogTableVisible = false
    },
    tableHeaderCellStyle () {
      return 'background-color: rgb(149,149,149) !important;color: rgb(73, 71, 71);border-bottom: 1px solid #DCDFE7;border-top:3px solid #3ac1ea;'
    },
    refresh () {
      // this.getDataList();
      this.getBaseDataList2();
      this.selectBaseItem = {}
    },
    refresh2 () {
      // this.getDataList();
      this.getDataList();
    },
    // addData () {
    //   let _this = this;
    //   _this.Params2 = []
    //   _this.showFlag = !_this.showFlag;
    //   _this.Params = null;
    //   _this.Params2 = _this.selectBaseItem
    // },
    // modifyData () {
    //   let _this = this;
    //   if (_this.multipleSelection.length !== 1) {
    //     this.$message.warning('请勾选您要修改的一条数据！')
    //   } else {
    //     _this.showFlag = !_this.showFlag;
    //     _this.Params = _this.multipleSelection
    //   }
    // },
    recoverData () {
      let _this = this;
      if (JSON.stringify(this.rowData) === "{}") {
        this.$message.warning('请先点击选中一条您要启用的数据')
        return
      }
      _this.axios.post('pass/baseManagement/v1/limsbasestorages/recover', [_this.rowData], { individualType: 'json' }).then(res => {
        if (res.succeed) {
          _this.dialogTableVisible = false;
          this.$message.success('启用成功');
          _this.searchData()
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.$message.error(e.message)
      })

    },
    deleteData () {
      let _this = this;
      if (JSON.stringify(this.rowData) === "{}") {
        this.$message.warning('请先点击选中一条您要停用的数据')
        return
      }
      _this.axios.post('pass/baseManagement/v1/limsbasestorages/abolish', [_this.rowData], { individualType: 'json' }).then(res => {
        if (res.succeed) {
          _this.dialogTableVisible = false;
          this.$message.success('停用成功');
          _this.searchData()
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.$message.error(e.message)
      })
    },
    searchData () {
      this.rowData = {}
      this.page.pageNum = 1;
      this.getDataList()
    },
    reset () {
      let _this = this;
      this.rowData = {}
      _this.search.strTypeName = '';
      _this.search.strName = '';
      this.selectBaseItem = {}
      _this.getBaseDataList2();
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    pageSizeChange (size) {
      this.page.pageSize = size;
      this.getDataList();
    },
    pageCurrentChange (index) {
      this.page.pageNum = index;
      this.getDataList();
    },
    addScreen () {
      this.$nextTick(() => {
        let ss = document.createElement('div');
        ss.innerHTML = '筛选';
        ss.style = 'text-align: center;'
        this.$refs.dataTable.$el.getElementsByClassName('el-table__fixed')[0].getElementsByTagName('td')[0].appendChild(ss);
      });
    },
    getDataList () {
      this.dataLoading = true;
      let obj = {
        object: {
          strTypeCode: this.search.strTypeCode,
          strName: this.search.strName,
          strNo: this.selectBaseCodeNo ? this.selectBaseCodeNo : '',
        },
        pageIndex: this.page.pageNum,
        pageSize: this.page.pageSize
      }
      this.axios.post("pass/baseManagement/v1/limsbasestorages/queryLimsBaseStoragePage", obj, { individualType: 'json' }).then(res => {
        this.dataLoading = false;
        this.table.list = res.data.list;
        this.table.list.forEach(item => {
          item.validFlag1 = item.validFlag == '0' ? '无效' : item.validFlag == '1' ? '有效' : ''
          item.levelNum1 = item.levelNum == '0' ? '仓库' : item.levelNum == '1' ? '货架' : item.levelNum == '2' ? '货位' : ''
        })
        this.page.totalPage = res.data.total;
      }).catch(e => {
        this.dataLoading = false;
      });
    },
    nodeClick (item) {
      console.log(item, 'item');
      this.page.pageNum = 1
      this.selectBaseCodeNo = item.strNo;
      this.selectBaseItem = item;
      this.getDataList();
    },
    getBaseDataList2 () {
      this.treeLoading = true
      this.axios.post("pass/baseManagement/v1/limsbasestorages/queryLimsBaseStorageTree", {}, { individualType: 'json' }).then(response => {
        if (response.code == 0 || response.code == 200) {
          this.baseDataTree = response.data
        } else {
          this.$message.error(response.message)
        }
        this.treeLoading = false
      }).catch(err => {
        this.treeLoading = false
        this.$message.error(err.message)
      })
      // this.axios.get('pass/baseManagement/v1/limsbasestorages/' + '?sortNo=')
      //   .then(res => {
      //     console.log(res.data.list,'res.data.list');
      //     this.initTree(res.data.list);
      //   });
    },
    initTree (data) {
      var list = [];
      var parentList = [];
      for (var i = 0; i < data.length; i++) {
        data[i].children = [];
        data[i].label = data[i].strName;
        if (data[i].sortNo === '' || data[i].sortNo === null) {
          parentList.push(data[i]);
        } else {
          list.push(data[i]);
        }
      }
      this.getChildren(parentList, list);
      this.baseDataTree = parentList;
    },
    getChildren (parentList, list) {
      for (var i = 0; i < parentList.length; i++) {
        var childrenList = [];
        for (var j = 0; j < list.length; j++) {
          if (parentList[i].strNo === list[j].sortNo) {
            parentList[i].children.push(list[j]);
            childrenList.push(list[j]);
          }
        }
        if (childrenList.length > 0) {
          this.getChildren(childrenList, list);
        }
      }
    },
    tableRowClassName ({ row, column, rowIndex, columnIndex }) {
      if (row.validFlag !== '1') {
        return 'error-row';
      }
      return '';
    },
    tableHeaderCellStyle () {
      return 'color: rgb(255,255,255);border-bottom: 1px solid #DCDFE7;'
    }
  }
}
</script>
<style  lang="less">
.el-tree {
  overflow-x: hidden !important;
}
.el-tree-node {
  .el-tree-node__label {
    border-bottom: 0;
  }
}
</style>
