modified: src/api/basicData/index.js modified: src/views/experiment/i...

Fixiaobai

2023-09-08 8635253d498ea4fefd6ea465704569ff34fed3f8

 src/views/standardLibrary/index.vue

@@ -1,670 +1,810 @@
<template>
  <div class="standard-library-main">
    <div class="content-main">
      <div class="library-bom">
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"
        />
        <el-button type="text" @click="getAllStandard">全部</el-button>
        <el-tree
          ref="tree"
          class="filter-tree"
          :data="standardTree"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          @node-click="nodeClick"
        />
      </div>
      <div class="library-table">
        <div class="table-header">
          <div class="search-bar">
            <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item>
                <el-input
                  v-model="searchData.keyword"
                  placeholder="请输入人员名称/原材料名称"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search" />
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="filteredTableData">查询</el-button>
                <el-button type="primary" plain @click="resetBtn">重置</el-button>
                <!-- <el-button type="text">高级搜索<i class="el-icon-arrow-down el-icon--right" /></el-button> -->
              </el-form-item>
            </el-form>
          </div>
          <div class="serve-btn">
            <el-button type="primary" icon="el-icon-plus" @click="showFormInfo">{{ selectedNodeType }}</el-button>
          </div>
        </div>
        <div class="table-box">
          <el-table
            ref="tableData"
            :cell-style="{textAlign: 'center'}"
            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              min-width="50"
            />
            <!-- 复用 -->
            <el-table-column
              v-for="(item,index) in tablespecifications"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :min-width="item.minWidth"
            />
            <template v-if="showTableCurrent===2">
              <el-table-column
                prop="spe_state"
                label="状态"
                min-width="150"
              >
                <template slot-scope="scope">
                  <el-tag
                    :type="scope.row.spe_state === 0 ? 'primary' : 'success'"
                    disable-transitions
                  >{{ scope.row.spe_state === 0 ? '已停用' : '已启用' }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                min-width="150"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    :style="{marginRight:'8px'}"
                    @click="specificationDetails(scope.row)"
                  >查看</el-button>
                  <el-popover
                    v-model="scope.row.visible"
                    placement="top"
                    width="30"
                  >
                    <div @click=" getRowID(scope.row)" style="text-align: center; margin: 0">
                      <div>
                        <el-button size="mini" @click="dialogFormVisible4=true" type="text">编辑</el-button>
                      </div>
                      <div>
                        <el-button size="mini" @click="dialogFormVisible5 = true" type="text">停用</el-button>
                      </div>
                    </div>
                    <el-button slot="reference" type="text"><i class="el-icon-more" /></el-button>
                  </el-popover>
                </template>
              </el-table-column>
            </template>
          </el-table>
          <!-- 弹出表单页 -->
          <div>
            <!-- 添加标准 -->
            <el-dialog title="添加标准" :visible.sync="dialogFormVisible1">
              <el-form ref="standardForm" :model="standardForm" :rules="rulesStandard">
                <el-form-item label="标准号" :label-width="formLabelWidth" prop="standardnumber">
                  <el-input v-model="standardForm.standardnumber" autocomplete="off" />
                </el-form-item>
                <el-form-item label="标准名称" :label-width="formLabelWidth" prop="standardname">
                  <el-input v-model="standardForm.standardname" autocomplete="off" />
                </el-form-item>
                <el-form-item label="英文名称" :label-width="formLabelWidth" prop="standardenname">
                  <el-input v-model="standardForm.engname" autocomplete="off" />
                </el-form-item>
                <el-form-item label="父级分类" :label-width="formLabelWidth">
                  <el-select v-model="standardForm.type" placeholder="请选择">
                    <el-option label="原材料" value="0" />
                    <el-option label="电线电缆" value="1" />
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
              </div>
            </el-dialog>
            <!-- 添加型号 -->
            <el-dialog title="添加型号" :visible.sync="dialogFormVisible2">
              <el-form ref="form" :model="modelForm" :rules="rulesModel">
                <el-form-item label="型号" :label-width="formLabelWidth" prop="model">
                  <el-input v-model="modelForm.model" autocomplete="off" />
                </el-form-item>
                <el-form-item label="型号名称" :label-width="formLabelWidth" prop="modelname">
                  <el-input v-model="modelForm.modelname" autocomplete="off" />
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="submitForm()">确 定</el-button>
              </div>
            </el-dialog>
            <!-- 添加规格 -->
            <el-dialog title="添加规格" :visible.sync="dialogFormVisible3">
              <el-form ref="form" :model="specificationForm" :rules="rulesspecification">
                <el-form-item label="规格名称" :label-width="formLabelWidth" prop="name">
                  <el-input v-model="specificationForm.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="规格编号" :label-width="formLabelWidth" prop="number">
                  <el-input v-model="specificationForm.number" autocomplete="off" />
                </el-form-item>
                <el-form-item label="上方填写生产指令号" :label-width="formLabelWidth" prop="instruct">
                  <el-input v-model="specificationForm.instruct" autocomplete="off" />
                </el-form-item>
                <el-form-item label="电压等级" :label-width="formLabelWidth">
                  <el-select v-model="specificationForm.voltageLevel" placeholder="请选择电压等级">
                    <el-option label="分类1" value="test" />
                    <el-option label="分类2" value="2" />
                    <el-option label="分类3" value="3" />
                  </el-select>
                </el-form-item>
                <el-form-item label="主线芯截面" :label-width="formLabelWidth">
                  <el-select v-model="specificationForm.crossSection" placeholder="请选择主线芯截面">
                    <el-option label="分类1" value="test" />
                    <el-option label="分类2" value="2" />
                    <el-option label="分类3" value="3" />
                  </el-select>
                </el-form-item>
                <el-form-item label="主线芯芯数" :label-width="formLabelWidth">
                  <el-select v-model="specificationForm.numberOfCores" placeholder="请选择主线芯芯数">
                    <el-option label="分类1" value="test" />
                    <el-option label="分类2" value="2" />
                    <el-option label="分类3" value="3" />
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible3 = false">取 消</el-button>
                <el-button type="primary" @click="submitForm()">确 定</el-button>
              </div>
            </el-dialog>
            <!-- 编辑规格 -->
            <el-dialog title="编辑规格" :visible.sync="dialogFormVisible4">
              <el-form ref="form" :model="editSpeForm" :rules="rulesspecification">
                <el-form-item label="规格名称" :label-width="formLabelWidth" prop="name">
                  <el-input v-model="editSpeForm.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="规格编号" :label-width="formLabelWidth" prop="number">
                  <el-input v-model="editSpeForm.number" autocomplete="off" />
                </el-form-item>
                <el-form-item label="上方填写生产指令号" :label-width="formLabelWidth" prop="instruct">
                  <el-input v-model="editSpeForm.instruct" autocomplete="off" />
                </el-form-item>
                <el-form-item label="电压等级" :label-width="formLabelWidth">
                  <el-select v-model="editSpeForm.voltageLevel" placeholder="请选择电压等级">
                    <el-option label="分类1" value="test" />
                    <el-option label="分类2" value="2" />
                    <el-option label="分类3" value="3" />
                  </el-select>
                </el-form-item>
                <el-form-item label="主线芯截面" :label-width="formLabelWidth">
                  <el-select v-model="editSpeForm.crossSection" placeholder="请选择主线芯截面">
                    <el-option label="分类1" value="test" />
                    <el-option label="分类2" value="2" />
                    <el-option label="分类3" value="3" />
                  </el-select>
                </el-form-item>
                <el-form-item label="主线芯芯数" :label-width="formLabelWidth">
                  <el-select v-model="editSpeForm.numberOfCores" placeholder="请选择主线芯芯数">
                    <el-option label="分类1" value="test" />
                    <el-option label="分类2" value="2" />
                    <el-option label="分类3" value="3" />
                  </el-select>
                </el-form-item>
                <el-form-item label="规格状态" :label-width="formLabelWidth">
                  <el-select v-model="editSpeForm.spe_state" placeholder="请选择规格状态">
                    <el-option label="停用" value="0" />
                    <el-option label="正常" value="1" />
                    <el-option label="草稿" value="-1" />
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible4 = false">取 消</el-button>
                <el-button type="primary" @click="handleEdit">确 定</el-button>
              </div>
            </el-dialog>
            <!-- 停用 -->
            <el-dialog
              title="提示"
              :visible.sync="dialogFormVisible5"
              width="30%">
              <span>确认停用吗？</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible5 = false">取 消</el-button>
                <el-button type="primary" @click="updateSpeState">确 定</el-button>
              </span>
            </el-dialog>
          </div>
          <div>
            <!-- 分页器 -->
            <el-pagination
              :current-page="pageParams.pageNo"
              :page-sizes="[10, 15, 20, 25]"
              :page-size="pageParams.pageNo"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageParams.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
   <div class="standard-library-main">
      <div class="content-main">
         <div class="library-bom" style="width: 300px">
            <el-row :gutter="10">
               <el-col :span="19">
                  <el-input size="small" clearable v-model="filterText" placeholder="输入关键字进行过滤"></el-input>
               </el-col>
               <el-col :span="5">
                  <el-button size="small" type="primary" icon="el-icon-plus" @click="addSdantard()"></el-button>
               </el-col>
            </el-row>
            <el-button size="small" type="text">全部</el-button>
            <el-tree ref="tree" style="width: 100%" class="filter-tree" :data="standardTree" :props="defaultProps"
               node-key="id" :highlight-current="true" :default-expand-all="true" :filter-node-method="filterNode"
               :render-content="renderContent" @node-click="nodeClick" />
         </div>
         <div class="library-table" style="width: 80%">
            <div class="table-header">
               <div class="serve-btn">
                  <span class="tipMsg">{{ msg !== "" ? msg : "" }}</span>
                  <el-select size="small" v-model="versionValue" @change="changeSelect" placeholder="请选择版本号">
                     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                     </el-option>
                  </el-select>
                  <el-button size="small" type="primary" @click="addVersionFun">新增版本号</el-button>
                  <el-button size="small" type="primary" @click="centerDialogVisible = true">新增项目</el-button>
                  <el-button size="small" class="top_div_button" icon="el-icon-delete-solid" style="color: #00a5ff"
                     @click="deleteListClick">删除</el-button>
               </div>
            </div>
            <div class="table-box">
               <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border
                  height="calc(100vh - 250px)" default-expand-all ref="multipleTable" @select="selectTr"
                  @select-all="selectAll" @selection-change="handleSelectionChange"
                  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                  <el-table-column type="selection" label="序号"> </el-table-column>
                  <el-table-column type="index" width="50px" label="序号"></el-table-column>
                  <el-table-column label="项目名称" sortable>
                     <template scope="scope">
                        <el-tag>
                           <div class="firstDiv" :style="`color: ${scope.row.code == '[1]' ? '#16a7ff' : '#58c173'
                              }`">
                              {{ scope.row.code == "[1]" ? "01" : "02" }}
                           </div>
                           <span style="color: black">{{ scope.row.name }}</span>
                        </el-tag>
                     </template>
                  </el-table-column>
                  <el-table-column prop="unit" label="单位" sortable></el-table-column>
                  <el-table-column label="标准值" sortable>
                     <template scope="scope">
                        <el-input v-if="scope.row.edit === true || scope.row.code === '[2]'"
                           @blur="requiredOnfocus(scope)" v-model="scope.row.required"
                           placeholder="请输入标准值"></el-input>
                     </template>
                  </el-table-column>
                  <el-table-column prop="internal" label="内控值" sortable>
                     <template scope="scope">
                        <el-input v-if="scope.row.edit === true || scope.row.code === '[2]'"
                           @blur="requiredOnfocus(scope)" v-model="scope.row.internal"
                           placeholder="请输入内控值"></el-input>
                     </template>
                  </el-table-column>
               </el-table>
               <!-- 弹出表单页 -->
               <div>
                  <!--  -->
               </div>
            </div>
         </div>
      </div>
      <el-dialog class="addTree" title="添加标准指标" width="28%" :visible.sync="addTreeFormVisible">
         <el-form v-model="addTreeForm" label-position="top">
            <el-form-item :required="true" label="标准类型">
               <el-cascader v-model="addTreeForm.addTypeArr" :options="formTypeOptions"
                  :props="{ ...defaultProps, checkStrictly: true }" clearable @change="changeCascader" />
            </el-form-item>
            <el-form-item :required="true" v-show="addTreeForm.addTypeArr.length < 2" label="物料名称">
               <el-select style="width: 100%;" @blur="changeSample" v-model="addTreeForm.materialName"
                  placeholder="请选择">
                  <el-option v-for="item in materialList" :key="item.material" :label="item.material"
                     :value="item.material">
                  </el-option>
               </el-select>
            </el-form-item>
            <el-form-item v-show="addTreeForm.addTypeArr.length < 3" label="执行标准">
               <el-input v-model="addTreeForm.standardName" />
            </el-form-item>
            <el-form-item v-show="addTreeForm.addTypeArr.length < 4" label="规格型号">
               <el-input v-model="addTreeForm.specificationsName" />
            </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="subAddTreeForm">确 定</el-button>
            <el-button @click="clear">取 消</el-button>
         </div>
      </el-dialog>
      <el-dialog :visible.sync="centerDialogVisible" width="30%" title="新增" :hide-required-asterisk="false">
         <el-form :model="form" :rules="rules" ref="ruleForm" class="addForm">
            <el-form-item prop="father">
               <span>项目分组：</span>
               <el-autocomplete class="inline-input" v-model="form.father" :fetch-suggestions="querySearch"
                  placeholder="请输入样品分组" style="width: calc(100% - 70px);"></el-autocomplete>
            </el-form-item>
            <el-row :gutter="24">
               <el-col :span="12">
                  <el-form-item prop="name">
                     <span>项目名称：</span>
                     <el-input style="width: calc(100% - 70px);" v-model="form.name"
                        placeholder="请输入项目名称"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item prop="unit">
                     <span v-html="'单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：'"></span>
                     <el-input style="width: calc(100% - 70px);" v-model="form.unit" placeholder="请输入单位"></el-input>
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>
         <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false" size="small ">取 消</el-button>
            <el-button type="primary" @click="submitAdd" size="small ">确认</el-button>
         </span>
      </el-dialog>
   </div>
</template>

<script>
import { getStandardsList, getSerialNumberList, getSpecificationsList, getStandardsListOfPage, addStandards, addSerialNumber, addSpecifications, updateSpecifications, updateSpeState } from '@/api/standardLibrary'
import {
   getMaterialList,
   getProductList,
   addMaterial,
   addStandards,
   addSpecifications,
   deleteListApi,
   blurUpdateApi,
   getVersion,
   addVersion,
   addProduct
} from "@/api/standardLibrary";
import {
   addStandardProjectGroupApi,
   getSample
} from "@/api/basicData/index";
export default {
  data() {
    return {
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      dialogFormVisible5: false,
      visible: false,
      filterText: '',
      // 标准库bom树
      standardTree: [],
      // bom的,默认值
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 查询条件
      searchData: {
        keyword: ''
      },
      tableData: [
      ],
      oldtableData: [],
      // 分页参数
      pageParams: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      tablespecifications: [
      ],
      // 选中节点对应的表格 0 是标准表 1是型号表 2规格表
      showTableCurrent: 0,
      // 选中的节点数据
      selectNode: {},
      selectedNodeType: '添加标准',
      standardForm: [{
        standardnumber: '',
        standardname: '',
        engname: '',
        type: ''
      }],
      modelForm: [{
        model: '',
        modelname: ''
      }],
      specificationForm: [{
        name: '', // 产品规格名称
        number: '', // 规格编号
        crossSection: '',
        numberOfCores: '',
        instruct: '',
        voltageLevel: ''
      }],
      editSpeForm: [{
        crossSection: '',
        instruct: '',
        name: '', // 规格名称
        number: '', // 规格编号
        numberOfCores: '',
        serialId: '', // 型号ID
        spe_state: '',
        voltageLevel: ''
      }],
      formLabelWidth: '120',
      rulesStandard: {
        standardnumber: [
          {
            required: true, message: '请输入标准号', trigger: 'blur'
          }
        ],
        standardname: [{
          required: true, message: '请输入标准名称', trigger: 'blur'
        }],
        standardenname: [
          { required: false, message: '请输入英文名称', trigger: 'blur' }
        ]
      },
      rulesModel: {
        model: [
          { required: true, message: '请输入型号', trigger: 'blur'
          }],
        modelname: [{
          required: true, message: '请输入型号名称', trigger: 'blur'
        }],
        parentclassification: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      rulesspecification: {
        number: [
          { required: true, message: '请输入规格编号', trigger: 'blur'
          }],
        name: [{
          required: true, message: '请输入规格名称', trigger: 'blur'
        }],
        instruct: [
          { required: true, message: '请输入上方填写生产指令号', trigger: 'blur' }
        ]
      },
      standardId: '', // 获取当前标准ID
      modelId: '', // 获取当前型号ID
      rowId: '' // 获取当前规格所在行ID
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getStandardTree()
    this.getAllStandard()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 获取bom树的标准数据
    async getStandardTree() {
      this.selectedNodeType = '添加标准'
      const { data: standard } = await getStandardsList()// 获取所有标准
      // console.log(standard)// 获取所有标准
      this.standardTree = standard.map(item => {
        item.serialNumber = item.serialNumber?.map(childrenItem => ({ ...childrenItem, label: childrenItem.name }))
        return { ...item, label: item.name, children: item.serialNumber }
      })
      // console.log(this.standardTree)
    },
    // 点击bom树节点方法
    async nodeClick(data, node, element) {
      // console.log('data', data)
      // console.log('children' in data)
      // 是子节点
      if (!('children' in data)) {
        // console.log('点击子节点', data)
        this.selectedNodeType = '添加规格'
        this.modelId = data.id
        this.selectNode = data
        // 获取点击子节点的表格
        await this.getSpecifications(data)
        return
      }
      // 不是子节点
      this.selectedNodeType = '添加型号'
      this.standardId = data.id
      this.selectNode = data
      await this.getSerialNumber(data)
    },
    specificationDetails(row) {
      // 跳转产品规格详情页
      this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`)
    },
    getRowID(row) {
      // console.log(row.id)
      this.id = row.id
    },
    // 获取所有标准table
    async getAllStandard() {
      this.selectedNodeType = '添加标准'
      // console.log(this.pageParams)
      const { data: { row, total }} = await getStandardsListOfPage({ ...this.pageParams })
      // console.log('得到所有标准==>', row)
      this.pageParams.total = total
      this.tableData = row
      this.tablespecifications = [
        {
          prop: 'name',
          label: '标准名称',
          minWidth: '150px'
        },
        {
          prop: 'eng_name',
          label: '标准英文名称',
          minWidth: '150px'
        },
        {
          prop: 'createTime',
          label: '创建时间',
          minWidth: '150px'
        }
      ]
      this.showTableCurrent = 0
    },
    // 获取对应型号下的所有规格
    async getSerialNumber(data) {
      const { data: { row, total }} = await getSerialNumberList({ standardsId: data.id, ...this.pageParams })
      console.log('点击父节点', row)// 根据标准获取对应标准下的规格
      this.tableData = row
      this.pageParams.total = total
      this.tablespecifications = [
        {
          prop: 'name',
          label: '型号名称',
          minWidth: '150px'
        }
      ]
      this.showTableCurrent = 1
    },
    // 获取标准下对应的所有型号
    async getSpecifications(data) {
      const { data: { row, total }} = await getSpecificationsList({ serialNumberId: data.id, ...this.pageParams })
      // console.log(row)
      this.tableData = row
      this.pageParams.total = total
      this.tablespecifications = [
        {
          prop: 'name',
          label: '产品名称',
          minWidth: '150px'
        },
        {
          prop: 'username',
          label: '更新人',
          minWidth: '100px'
        },
        {
          prop: 'updateTime',
          label: '更新时间',
          minWidth: '150px'
        },
        {
          prop: 'vel',
          label: '版本',
          minWidth: '150px'
        }
      ]
      this.showTableCurrent = 2
    },
    // 展示弹出框
    showFormInfo() {
      if (this.selectedNodeType === '添加标准') {
        this.dialogFormVisible1 = true
      } else if (this.selectedNodeType === '添加型号') {
        this.dialogFormVisible2 = true
      } else {
        this.dialogFormVisible3 = true
      }
    },
    async submitForm() {
      if (this.showTableCurrent === 0) {
        await addStandards({ engName: this.standardForm.engname,
          id: this.standardForm.standardnumber,
          name: this.standardForm.standardname,
          type: parseInt(this.standardForm.type) })
        this.dialogFormVisible1 = false
      } else if (this.showTableCurrent === 1) {
        await addSerialNumber({ id: this.modelForm.model,
          name: this.modelForm.modelname,
          standardsId: this.standardId // 关联标准ID
        })
        this.dialogFormVisible2 = false
      } else {
        await addSpecifications({ crossSection: this.specificationForm.crossSection,
          instruct: this.specificationForm.instruct,
          name: this.specificationForm.name,
          number: this.specificationForm.number,
          numberOfCores: this.specificationForm.numberOfCores,
          serialId: this.modelId, // 关联型号ID
          voltageLevel: this.specificationForm.voltageLevel
        })
        this.dialogFormVisible3 = false
      }
    },
   data() {
      return {
         projectGroupingOptions: [],
         form: {
            father: "", // 项目分组
            name: "", // 项目名称
            unit: "", // 单位
         },
         rules: {
            fater: [{ required: true, message: "请选择项目名称", trigger: "blur" }],
            name: [
               { required: true, message: "请输入项目名称", trigger: "blur" },
               { min: 2, max: 25, message: "长度在 2 到 25 个字符", trigger: "blur", },
            ],
            unit: [
               { required: true, message: "请输入单位", trigger: "blur" },
               { min: 1, max: 25, message: "长度在 1 到 25 个字符", trigger: "blur" }
            ],
         },
         centerDialogVisible: false,
         filterNodeData: [],
         options: [],
         versionValue: "",
         deleteList: [],
         msg: "",
         isAllSelect: false,
         addTreeFormVisible: false,
         filterText: "",
         // 标准库bom树
         standardTree: [],
         // bom的,默认配置值
         defaultProps: {
            children: "children",
            label: "name",
            value: "id",
         },
         tableData: [],
         oldtableData: [],
         tablespecifications: [],
         // 选中的节点数据
         selectData: {},
         formTypeOptions: [],
         addTreeForm: {
            addTypeArr: [],
            specificationsName: "",
            materialName: "",
            standardName: "",
         },
         materialList: []
      };
   },
   watch: {
      filterText(val) {
         this.$refs.tree.filter(val);
      },
      addTreeFormVisible(newVal) {
         if (newVal === false) {
            this.clear();
         }
      },
      centerDialogVisible: {
         handler(newVal, oldVal) {
            if (newVal == true) {
               addStandardProjectGroupApi().then((res) => {
                  this.projectGroupingOptions = res.data;
               });
            } else {
               // 请求成功清除数据
               this.form = {};
               // 提交成功清除检验
               this.$refs.ruleForm.resetFields();
            }
         },
      },
   },
   created() {
      this.getStandardTree();
   },
   mounted() {

    // 分页条件改变时判断需要分页查询的方法
    judgment() {
      switch (this.showTableCurrent) {
        case 0:
          this.getAllStandard()
          break
        case 1:
          this.getSerialNumber(this.selectNode)
          break
        case 2:
          this.getSpecifications(this.selectNode)
          break
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageParams.pageSize = val
      this.judgment()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageParams.pageNo = val
      this.judgment()
    },
    // 查询按钮
    filteredTableData() {
      this.oldtableData = this.tableData
      // 根据输入的关键字得到过滤后的数据，如果有就把过滤后的数据展示在页面上
      const filteredtabledata = this.tableData.filter(item => {
        return item.name.includes(this.searchData.keyword)
      })
      // console.log('filteredtabledata', filteredtabledata)
      this.tableData = filteredtabledata
    },
    // 重置按钮
    resetBtn() {
      this.searchData.keyword = ''
      this.tableData = this.oldtableData
    },
    // 处理编辑规格
    async handleEdit() {
      // console.log(this.id)
      await updateSpecifications({ crossSection: this.editSpeForm.crossSection,
        id: this.rowId,
        instruct: this.editSpeForm.instruct,
        name: this.editSpeForm.name,
        number: this.editSpeForm.number,
        numberOfCores: this.editSpeForm.numberOfCores,
        serialId: this.modelId, // 关联型号ID
        spe_state: this.editSpeForm.spe_state,
        voltageLevel: this.editSpeForm.spe_state })
      this.dialogFormVisible4 = false
    },
    // 停用
    async updateSpeState() {
      await updateSpeState({ id: this.rowId,
        spe_state: '0' })
      this.dialogFormVisible5 = false
    }
  }
}
   },
   methods: {
      async addSdantard() {
         this.addTreeFormVisible = true
         let res = await getSample()
         this.materialList = res.data
      },
      querySearch(queryString, cb) {
         var restaurants = []
         this.projectGroupingOptions.forEach(a => {
            restaurants.push({
               value: a
            })
         })
         var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
         // 调用 callback 返回建议列表的数据
         cb(results);
      },
      createFilter(queryString) {
         return (restaurant) => {
            return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
      },
      clear() {
         this.addTreeFormVisible = false;
         this.addTreeForm.addTypeArr = [];
         this.addTreeForm.specificationsName = '';
         this.addTreeForm.materialName = ''
         this.addTreeForm.standardName = ''
      },
      changeSample() {
         if (this.addTreeForm.materialName != null && this.addTreeForm.materialName != '') {
            return true
         } else {
            this.$message({
               message: '请先选择物料！',
               type: 'warning'
            });
            return false
         }
      },
      oneSize() { },
      twoSize() {
         return true;
      },
      threeSize() {
         return true;
      },
      async initSelect() {
         this.options = [];
         this.versionValue = "";
         const response = await getVersion({
            specificationsId: this.selectData.id,
         });
         if (response.code === 200 && response.data.length > 0) {
            this.getTableByClick(this.selectData, response.data[0]);
            for (let i = 0; i < response.data.length; i++) {
               this.options.push({
                  value: response.data[i],
                  label: "V" + response.data[i],
               });
               this.versionValue = response.data[0];
            }
         }
      },
      changeSelect() {
         this.tableData = [];
         this.getTableByClick(this.selectData, this.versionValue);
      },
      async submitAdd() {
         await addProduct({
            father: this.form.father,
            name: this.form.name,
            specificationId: this.selectData.id,
            unit: this.form.unit,
            version: this.versionValue
         }).then(res => {
            console.log(res);
            this.$message.success(res.message);
            this.centerDialogVisible = false;
            this.getTableByClick(this.selectData, this.versionValue);
         }).catch(error => {
            this.$message.error(error.message);
         })
      },
      async insertVersion() {
         const resp = await addVersion({
            specificationsId: this.selectData.id,
            version: this.versionValue
         });
         if (resp.code === 200) {
            this.initSelect();
            this.$message({
               type: "success",
               message: resp.message,
            });
         }
      },
      addVersionFun() {
         this.$confirm("确认添加新的版本号吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
         })
            .then(() => {
               this.insertVersion();
            })
            .catch(() => { });
      },
      filterNode(value, data, node) {
         if (!value) return true;
         return data.name.indexOf(value) !== -1;
      },
      // 获取bom树的标准数据
      async getStandardTree() {
         let {
            data
         } = await getMaterialList();
         if (data.length < 2) {
            if (data.length == 0) {
               data = [{
                  type: 0
               }, {
                  type: 1
               }]
            } else {
               data[1] = {
                  type: data[0].type == 1 ? 0 : 1
               }
            }
         }
         this.standardTree = data.map((item) => {
            let name = null;
            switch (item.type) {
               case 0:
                  name = "原材料";
                  break;
               case 1:
                  name = "成品";
                  break;
            }
            return {
               ...item,
               id: item.type,
               name,
            };
         });
         // formTypeOptions
         // 默认第一个四级节点搜索，新增配置项
         const treeOptions = JSON.parse(JSON.stringify(this.standardTree));
         this.getDefault(treeOptions, 0);
         this.formTypeOptions = treeOptions;
         this.$nextTick().then(() => {
            const firstNode = document.querySelector(
               ".el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node"
            );
            try {
               firstNode.click();
            } catch (e) {
               //TODO handle the exception
            }
         });

      },
      getDefault(arr, index) {
         for (const item of arr) {
            if (item.children && item.children?.length > 0) {
               // 有子节点
               this.getDefault(item.children, index + 1);
               if (index === 2) {
                  item.children = null;
               }
            }
         }
      },
      // 点击bom树节点方法
      async nodeClick(data, node, element) {
         // 是子节点
         if (node.level === 4) {
            this.getParentData(node.parent, node.data.name);
            // 存下选中节点
            this.selectData = data;
            this.getTableByClick(data, this.versionValue);
            this.initSelect();
         }
         if (!("children" in data)) {
            return;
         }
      },
      // 获取树路径
      getParentData(node, name) {
         if (node !== null) {
            if (node.data.name !== undefined) {
               this.msg = node.data.name + " > " + name;
            }
            this.getParentData(node.parent, this.msg);
         }
      },
      async getTableByClick(data, versionVal) {
         await getProductList({
            specificationsId: data.id,
            version: versionVal,
         }).then((res) => {
            res.data.forEach((i) => {
               if (i.name === undefined) {
                  i.name = i.children[0].name;
                  i.unit = i.children[0].unit;
                  i.id = i.children[0].id;
                  i.required = i.children[0].required;
                  i.internal = i.children[0].internal;
                  i.edit = true;
                  delete i.children;
               }
            });
            this.tableData = res.data;
            this.selectDataList();
         });
      },
      specificationDetails(row) {
         // 跳转产品规格详情页
         this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`);
      },
      renderContent(h, {
         node,
         data,
         store
      }) {
         // 判断是否是父节点或文件夹
         const isFolder = "children" in data;
         return (<span class="tree-node"> {
            isFolder ? (<i class={node.expanded ? "el-icon-folder-opened blue-folder" : "el-icon-folder blue-folder"} ></i>
            ) : (<i class="el-icon-document blue-folder" > </i>)
         } <div class="tree-lable" > [{node.level}] {data.name} </div> </span>
         );
      },
      async subAddTreeForm() {
         if (this.addTreeForm.addTypeArr.length == 0) {
            this.$message({
               message: '请先选择标准类型！',
               type: 'warning'
            });
            return
         }
         let res = null;
         // return;
         try {
            switch (this.addTreeForm.addTypeArr.length) {
               case 1:
                  let handelerSample = this.changeSample()
                  if (!handelerSample) {
                     return;
                  }
                  res = await addMaterial({
                     ...this.addTreeForm,
                     type: this.addTreeForm.addTypeArr[0],
                  });
                  break;
               case 2:
                  res = await addStandards({
                     ...this.addTreeForm,
                     materialId: this.addTreeForm.addTypeArr[1],
                  });
                  break;
               case 3:
                  res = await addSpecifications({
                     ...this.addTreeForm,
                     standardId: this.addTreeForm.addTypeArr[2],
                  });
                  break;
            }
         } catch (error) {
            this.$message.error("添加失败");
         }
         this.$message.success("添加成功");
         this.addTreeFormVisible = false;
         this.getStandardTree();
         this.getTableByClick(this.selectData, this.versionValue);
         this.addTreeForm.addTypeArr = [];
         this.addTreeForm.specificationsName = ''
         this.addTreeForm.materialName = ''
         this.addTreeForm.standardName = ''
         // console.log(this.addTreeForm);
      },
      changeCascader(data) {
         this.addTreeForm.addTypeArr = data;
      },
      selectDataList() {
         let i = 0
         this.tableData.forEach((a) => {
            a.id = "0" + i
            a.code = "[1]";
            i++;
            if (a.children != undefined) {
               a.children.forEach((b) => {
                  b.code = "[2]";
               });
            }
         });
      },
      // 表格树全部选中配置
      // 全选/取消选操作
      selectAll(val) {
         this.isAllSelect = !this.isAllSelect;
         let data = this.tableData;
         this.toggleSelect(data, this.isAllSelect, "all");
      },
      //选择某行
      selectTr(selection, row) {
         this.$set(row, "isChecked", !row.isChecked);
         this.$nextTick(() => {
            this.isAllSelect = row.isChecked;
            this.toggleSelect(row, row.isChecked, "tr");
         });
      },
      //递归子级
      toggleSelect(data, flag, type) {
         if (type === "all") {
            if (data.length > 0) {
               data.forEach((item) => {
                  this.toggleSelection(item, flag);
                  if (item.children && item.children.length > 0) {
                     this.toggleSelect(item.children, flag, type);
                  }
               });
            }
         } else {
            if (data.children && data.children.length > 0) {
               data.children.forEach((item) => {
                  item.isChecked = !item.isChecked;
                  this.$refs.multipleTable.toggleRowSelection(item, flag);
                  this.toggleSelect(item, flag, type);
               });
            }
         }
      },
      //改变选中
      toggleSelection(row, flag) {
         this.$set(row, "isChecked", flag);
         this.$nextTick(() => {
            if (flag) {
               this.$refs.multipleTable.toggleRowSelection(row, flag);
            } else {
               this.$refs.multipleTable.clearSelection();
            }
         });
      },
      handleSelectionChange(val) {
         this.deleteList = [];
         val.forEach((v) => {
            if (v.id !== undefined) {
               this.deleteList.push(v.id);
            }
         });
      },
      // 表格树全部选中配置  结束
      deleteListClick() {
         if (this.deleteList.length == 0) {
            this.$message.error('请选择要删除的项目')
            return
         }
         deleteListApi(this.deleteList).then((res) => {
            this.$message({
               message: res.message,
               type: "success",
            });
            this.getTableByClick(this.selectData, this.versionValue);
         });
      },
      async requiredOnfocus(scope) {
         console.log(scope);
         let obj = {
            id: scope.row.id,
            required: scope.row.required,
            internal: scope.row.internal,
         };
         let arr = ['>', '<', '='];
         if (obj.required === null || obj.required === undefined) {
            this.$message({
               message: '标准值不能为空！',
               type: 'warning'
            });
            return
         } else {
            let required = obj.required.charAt(0)
            if (!arr.includes(required)) {
               this.$message({
                  message: '标准值参数不符合！',
                  type: 'warning'
               });
               return
            }
         }
         if (obj.internal === null || obj.internal === undefined) {
            this.$message({
               message: '内控值不能为空！',
               type: 'warning'
            });
            return
         } else {
            let internal = obj.internal.charAt(0)
            if (!arr.includes(internal)) {
               this.$message({
                  message: '内控值参数不符合！',
                  type: 'warning'
               });
               return
            }
         }
         await blurUpdateApi(obj).then((res) => {
            this.$message({
               message: res.message,
               type: "success",
            });
            this.getTableByClick(this.selectData, this.versionValue);
         });
      },
   },
};
</script>

<style lang="scss" scoped>

.standard-library-main{
  width: 100%;
  height: 100%;
// 页面中心内容区域
  .content-main{
    display: flex;
    height: 100%;
    min-height: calc(100vh - 88px);
    padding: 15px;
    >div{
      padding: 20px;
      background: #fff;
    }
    .library-bom{
      flex: 2;
      margin-right: 12px;
      .el-tree {
        // margin-top: 12px;
      }
      // .el-tree {
      //   margin-top: 12px;
      //   ::v-deep .el-tree-node__content{
      //     height: 24px !important;
      //     font-size: 14px;
      //     display: inline-block !important;
      //     padding: 2px;
      //     color: #333;
      //   }
      //   ::v-deep .el-tree-node__content:hover{
      //     background: rgba(58,124,253,0.1) ;
      //     // opacity: 0.31;
      //     border-radius: 3px;
      //     color: #333 !important;
      //   }
      //   ::v-deep .el-tree-node:focus>.el-tree-node__content{
      //     background: rgba(58,124,253,0.1) ;
      //     // opacity: 0.31;
      //     border-radius: 3px;
      //     color: #333 !important;
      //   }
      // }
    }
    .library-table{
      flex: 8;
      margin-left: 12px;
      display: flex;
      flex-direction: column;

      .table-header{
        display: flex;
        justify-content: space-between;
        .el-form-item{
          margin-bottom: 30px !important;
        }
      }
      .table-box{
          flex: 1;
          background: #fff;
          // padding: 20px 20px 10px 20px;
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
          }
          >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }
  }
// el-table表格对齐
::v-deep .el-table__row:not([class*="el-table__row--level-"]) {
   td:nth-child(2) {
      padding-left: 23px !important;
   }
}
</style>

.standard-library-main {
   width: 100vh;
   height: 100%;

   // 页面中心内容区域
   .content-main {
      display: flex;
      height: 100%;
      min-height: calc(100vh - 88px);
      max-height: calc(100vh - 88px);
      padding: 15px;

      >div {
         padding: 20px;
         background: #fff;
      }

      .library-bom {
         // padding-right: 10px;
         width: 300px;
         overflow-y: auto;
         // height: 100%;
         max-height: 100%;

         // margin-right: 12px;
         // overflow-y: scroll;
         .el-tree {
            // margin-top:
            width: 100%;

            ::v-deep .el-tree-node__content {
               height: 24px !important;
               font-size: 18px;
               // display: inline-block !important;
               padding: 2px;

               // color: #333;
               .tree-node {
                  display: flex;
                  align-items: center;
                  height: 20px;
               }

               .tree-lable {
                  height: 100%;
                  line-height: 23px;
                  font-size: 12px;
                  padding-left: 8px;
               }

               .blue-folder {
                  color: rgb(64, 158, 255);
               }
            }
         }
      }

      .library-table {
         // height: 100%;
         width: 170vh;
         max-height: 100%;
         // flex: 8;
         margin-left: 12px;
         display: flex;
         flex-direction: column;

         // overflow-y: scroll;
         .table-header {
            display: flex;
            justify-content: space-between;
            width: 100%;

            .el-form-item {
               margin-bottom: 30px !important;
            }
         }

         .table-box {
            flex: 1;
            background: #fff;
            // padding: 20px 20px 10px 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            >div:nth-child(3) {
               // height: 20px;
               display: flex;
               justify-content: end;
               margin: 10px 0;
            }
         }
      }
   }

   .addTree {
      .el-form-item {
         margin-bottom: 10px;
      }

      .el-cascader {
         width: 100%;
      }
   }
}

.search-bar {
   .el-input {
      position: relative;
      font-size: 0.07292rem;
      display: inline-block;
      width: 70%;
   }
}

.firstDiv {
   float: left;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: #eff5ff;
   margin-top: 5px;
   justify-content: center;
   display: flex;
   align-items: center;
   margin-right: 8px;
}

.el-tag.el-tag {
   border-color: transparent;
   background-color: transparent;
}

.el-tag.el-tag:hover {
   border-color: transparent;
   background-color: transparent;
}

.serve-btn {
   width: 100%;
   padding-bottom: 6px;
   text-align: right;

   .el-select {
      margin-right: 10px;
   }
}

.tipMsg {
   float: left;
   font-size: 16px;
   font-weight: 500;
   color: #999999;
}
</style>