9.21

value

2023-09-21 4f5549cd814eeaecd0ff04de62452d8d5fb4cbc5

 src/components/view/processInspection.vue

@@ -1,435 +1,796 @@
<template>
    <div class="content-main">
      <div v-if="!showAddPage" class="rawPage">
          <div class="title">
        <el-row>
          <el-col :span="12">过程检验</el-col>
          <el-col :span="12" style="text-align: right;">
            <el-button @click="handleAddNew" type="primary" size="mini" icon="el-icon-plus" style="background: #004EA2; ">新增</el-button>
            <el-button icon="el-icon-delete" size="mini">删除</el-button>
            <el-button icon="el-icon-download" size="mini">导出</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="nav">
          <span>检验结果：</span>
          <el-select v-model="inspectionResult" size="small" placeholder="请选择" style="width: 224px;margin-right: 52px;">
              <el-option value="选项1"></el-option>
              <el-option value="选项2"></el-option>
            </el-select>
            <span>检验日期：</span>
            <el-date-picker
              v-model="inspectionDate"
              type="date"
              placeholder="选择日期"
              style="margin-right: 52px">
             </el-date-picker>
            <span>检验人：</span>
            <el-select v-model="inspecter" size="small" placeholder="请选择" style="width: 224px;margin-right: 52px;">
              <el-option value="选项1"></el-option>
              <el-option value="选项2"></el-option>
            </el-select>
            <el-button size="mini"><span>重 置</span></el-button>
            <el-button size="mini" type="primary" style="background: #004EA2;"><span>查 询</span></el-button>
      </div>
      <div class="content-body">
          <div class="inspectionTable">
              <el-table
                  ref="inspectionTable"
                  :height="400"
                  :max-height="400"
                  :cell-style="{textAlign: 'center'}"
                  :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
                  :data="inspectionTable"
                  style="width: 100%"
                  >
                  <el-table-column
                      type="selection"
                      width="50">
                  </el-table-column>
                  <el-table-column
                      prop="number"
                      label="订单号"
                      min-width="100"
                  />
                  <el-table-column
                      prop="username"
                      label="客户名称"
                      min-width="80"
                  />
                  <el-table-column
                      prop="projectname"
                      label="工程名称"
                      min-width="80"
                  />
                  <el-table-column
                      prop="tracenumber"
                      label="质量追溯号"
                      min-width="108"
                  />
                  <el-table-column
                      prop="code"
                      label="产品编码"
                      min-width="100"
                  />
                  <el-table-column
                      prop="class"
                      label="产品大类"
                      min-width="72"
                  />
                  <el-table-column
                      prop="specificationmodel"
                      label="规格型号"
                      min-width="110"
                  />
                  <el-table-column
                      prop="unit"
                      label="单位"
                      min-width="50"
                  />
                  <el-table-column
                      prop="quantity"
                      label="数量"
                      min-width="50"
                  />
                  <el-table-column
                      prop="machine"
                      label="机台"
                      min-width="60"
                  />
                  <el-table-column
                      prop="group"
                      label="班组"
                      min-width="50"
                  />
                  <el-table-column
                      prop="worker"
                      label="主机工"
                      min-width="60"
                  />
                  <el-table-column
                      prop="date"
                      label="检验日期"
                      min-width="80"
                  />
                  <el-table-column
                      prop="result"
                      label="检测结果"
                      min-width="80"
                  />
                  <el-table-column
                      label="操作"
                      min-width="80"
                  >
                      <template slot-scope="scope">
                      <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                      <el-button type="text" size="small">打印</el-button>
                      </template>
                  </el-table-column>
              </el-table>
          </div>
          <!-- 分页器 -->
          <div class="pagination">
              <el-pagination
              :current-page="currentPage"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.inspectionTable.length"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
      </div>
      </div>
      <div class="newPage" v-if="showAddPage">
          <!-- 新增页面 -->
              <div class="addInspection">
                  <el-row class="header">
                      <el-col :span="12">新增过程检验单</el-col>
                      <el-col :span="12" style="text-align: right;">
                          <!-- 点击返回，当前页面值为false -->
                      <el-button @click="showAddPage = false" type="primary" size="mini" icon="el-icon-back" style="background: #004EA2; ">返回</el-button>
                      </el-col>
                  </el-row>
                  <el-form :model="addInspectionform" ref="addInspectionform" class="addInspectionform" label-position="left" label-width="100px" size="mini" >
                      <div class="formwrapper">
                          <el-row :gutter="450">
                          <el-col :span="5">
                          <el-form-item label="订单号：">
                              <el-input style="width: 180px;" v-model="addInspectionform.number" placeholder="请输入订单号" autocomplete="off" />  
                          </el-form-item>
                          </el-col>
                          <el-col :span="5">
                          <el-form-item label="客户名称：">
                              <el-input style="width: 180px;" v-model="addInspectionform.username" placeholder="请输入客户名称" autocomplete="off" />
                          </el-form-item>
                          </el-col>
                          <el-col :span="5">
                          <el-form-item label="工程名称：">
                              <el-input style="width: 180px;" v-model="addInspectionform.projectname" placeholder="请输入工程名称" autocomplete="off" />
                          </el-form-item>
                          </el-col>
                      </el-row>
                      <el-row :gutter="450">
                          <el-col :span="5">
                          <el-form-item label="质量追溯号：" >
                              <el-input style="width: 180px;" v-model="addInspectionform.tracenumber" placeholder="请输入追溯号" autocomplete="off" />
                          </el-form-item>
                          </el-col>
                          <el-col :span="5">
                          <el-form-item label="产品编码：">
                              <el-input style="width: 180px;" v-model="addInspectionform.code" placeholder="请输入产品编码" autocomplete="off" />                        </el-form-item>
                          </el-col>
                          <el-col :span="5">
                          <el-form-item label="产品名称：">
                              <el-select style="width: 180px;" v-model="addInspectionform.class" size="small" placeholder="请选择产品名称">
                                  <el-option value="选项1"></el-option>
                                  <el-option value="选项2"></el-option>
                              </el-select>
                          </el-form-item>
                          </el-col>
                      </el-row>
                      <el-row :gutter="450">
                          <el-col :span="5">
                          <el-form-item label="规格型号：" >
                              <el-select style="width: 180px;" v-model="addInspectionform.specificationmodel" size="small" placeholder="请选择规格型号">
                                  <el-option value="选项1"></el-option>
                                  <el-option value="选项2"></el-option>
                              </el-select>
                          </el-form-item>
                          </el-col>
                          <el-col :span="5">
                          <el-form-item label="单位：" >
                              <el-select style="width: 180px;" v-model="addInspectionform.unit" size="small" placeholder="请选择单位">
                                  <el-option value="选项1"></el-option>
                                  <el-option value="选项2"></el-option>
                              </el-select>
                          </el-form-item>
                          </el-col>
                          <el-col :span="5">
                          <el-form-item label="数量：">
                              <el-input style="width: 180px;" v-model="addInspectionform.quantity" placeholder="请输入数量" autocomplete="off" />
                          </el-form-item>
                          </el-col>
                      </el-row>
                      <el-row :gutter="450">
                          <!-- <el-col :span="5">
                          <el-form-item label="班组：" >
                              <el-select style="width: 180px;" v-model="addInspectionform.group" size="small" placeholder="请选择班组">
                                  <el-option value="选项1"></el-option>
                                  <el-option value="选项2"></el-option>
                              </el-select>                       </el-form-item>
                          </el-col> -->
                          <el-col :span="5">
                          <el-form-item label="主机工：" >
                              <el-select style="width: 180px;" v-model="addInspectionform.worker" size="small" placeholder="请选择主机工">
                                  <el-option value="选项1"></el-option>
                                  <el-option value="选项2"></el-option>
                              </el-select>
                          </el-form-item>
                          </el-col>
                          <el-col :span="5">
                          <el-form-item label="机台：" >
                              <el-select style="width: 180px;" v-model="addInspectionform.machine" size="small" placeholder="请选择产品机台">
                                  <el-option value="选项1"></el-option>
                                  <el-option value="选项2"></el-option>
                              </el-select>
                          </el-form-item>
                          </el-col>
                      </el-row>
                      </div>
                  </el-form>
              </div>
              <div class="inspectionProject">
                  <span>检验项目</span>
                  <el-table :data="inspectionItems">
                      <el-table-column type="index" label="序号" width="60"></el-table-column>
                      <el-table-column prop="project" label="项目"></el-table-column>
                      <el-table-column prop="unit" label="单位"></el-table-column>
                      <el-table-column prop="standardVal" label="标准值"></el-table-column>
                      <el-table-column prop="controlVal" label="内测值"></el-table-column>
                      <el-table-column prop="detectionVal" label="检验值"></el-table-column>
                      <el-table-column label="试验设备">
                          <template slot-scope="scope">
                          {{ scope.row.device }}
                          <el-select v-model="scope.row.device" size="small" slot="append" style="width: 100px;">
                              <el-option value="选项1"></el-option>
                              <el-option value="选项2"></el-option>
                          </el-select>
                      </template>
                      </el-table-column>
                      <el-table-column prop="conclusion" label="结论">
                          <template slot-scope="scope">
                              <span style="color: #34BD66;" v-if="scope.row.insState==1">合格</span>
                              <span style="color: #E84738;" v-else-if="scope.row.insState==0">不合格</span>
                          </template>
                      </el-table-column>
                  </el-table>
              </div>
              <div class="inspectionResult">
                  <span>检测结果</span>
                  <el-table :data="inspectionResultForm">
                      <el-table-column prop="id" label="物料编号"></el-table-column>
                      <el-table-column prop="name" label="物料名称"></el-table-column>
                      <el-table-column prop="inspecter" label="检验员"></el-table-column>
                      <el-table-column prop="conclusion" label="检验结论"></el-table-column>
                      <el-table-column prop="operation" label="上报"></el-table-column>
                  </el-table>
              </div>
          </div>
  
    </div>
  </template>
  
  
  <script>
  export default {
      data(){
          return {
              inspectionResult: '',
              inspectionDate: '',
              inspecter: '',
              inspectionTable:[{
                  number: '8540395029753',
                  username: 'jack',
                  projectname: '布隆迪',
                  tracenumber: '826403164021',
                  code: 'C-982164',
                  class: '成品',
                  specificationmodel: '8.8/15kV JLS-3.2',
                  unit: '吨',
                  quantity: '15',
                  machine: '拉闸机',
                  group: '1组',
                  worker: '黄小明',
                  date: '2023-08-01',
                  result: '合格',
                  operation: ''
              },{
                  number: '2497320327652',
                  username: 'rose',
                  projectname: '布隆迪',
                  tracenumber: '826403164021',
                  code: 'C-24114',
                  class: '成品',
                  specificationmodel: '8.6/15kV JAD-3.2',
                  unit: '吨',
                  quantity: '43',
                  machine: '拉闸机',
                  group: '1组',
                  worker: '黄小明',
                  date: '2023-08-01',
                  result: '合格',
                  operation: ''
              }],
              currentPage: 1, // 当前页码
              pageSize: 100, 
              showAddPage: false,
              addInspectionform: [{
                  number: '',
                  username: '',
                  projectname: '',
                  tracenumber: '',
                  code: '',
                  class: '',
                  specificationmodel: '',
                  unit: '',
                  quantity: '',
                  group: '',
                  worker: '',
                  machine: ''
              }],
              inspectionItems:[{
                  project:'布隆迪',
                  unit:'吨',
                  standardVal: '8219384314',
                  controlVal:'9823401',
                  detectionVal:'11111',
                  device:'',
                  conclusion:'合格'
              }],
              inspectionResultForm:[{
                  id:'274024',
                  name:'111',
                  inspecter:'111',
                  conclusion:'',
                  operation:''
              }]
          }
      },
      methods:{
          // 每页条数改变时触发 选择一页显示多少行
          handleSizeChange(val) {
          console.log(`每页 ${val} 条`)
          this.currentPage = 1
          this.pageSize = val
          },
          // 当前页改变时触发 跳转其他页
          handleCurrentChange(val) {
          console.log(`当前页: ${val}`)
          this.currentPage = val
          },
          handleAddNew(){
              this.showAddPage=true
          }
      }
  
  }
  </script>
  
  <style>
  .title{
      padding: 12px;
  
  }
  .nav{
      display: flex;
      padding: 20px 20px;
      align-items: center;
      background-color: #fff;
  }
  .nav *{
      font-size: 14px;
  }
  .content-body .rawPage{
      background-color: #fff;
      overflow: hidden;
  }
  .inspectionTable{
      padding: 20px 20px;
  }
  .pagination{
      float: right;
      margin-right: 20px;
  }
  .newPage{
      overflow: hidden;
  }
  .header{
      padding: 12px;
  }
  .addInspectionform{
      background-color: #fff;
  }
  .addInspectionform .formwrapper{
      padding: 20px 0px;
      margin-left: 100px;
  }
  .inspectionProject span{
      display: block;
      padding: 5px 0px;
  }
  .inspectionProject .el-table{
      background-color: #fff;
      padding: 10px 12px;
  }
  .inspectionResult span{
      display: block;
      padding: 5px 0px;
  }
  .inspectionResult .el-table{
      background-color: #fff;
      padding: 10px 12px;
  }
  </style>
   <div class="content-main">
      <div v-if="!showAddPage && !showUp && !showLook" class="rawPage">
         <div class="title">
            <el-row>
               <el-col :span="12">过程检验</el-col>
               <el-col :span="12" style="text-align: right;">
                  <el-button @click="handleAddNew" type="primary" size="mini" icon="el-icon-plus"
                     style="background: #004EA2; ">新增</el-button>
                  <el-button icon="el-icon-download" size="mini">导出</el-button>
               </el-col>
            </el-row>
         </div>
         <div class="nav">
            <span>检验状态：</span>
            <el-select size="small" v-model="search.result" placeholder="请选择检测状态" style="width: 224px;margin-right: 52px;">
               <el-option :value="''" label="全部"></el-option>
               <el-option :value="1" label="合格"></el-option>
               <el-option :value="0" label="不合格"></el-option>
            </el-select>
            <span>产品名称：</span>
            <el-input size="small" style="width: 224px;margin-right: 30px;" v-model="search.name"
               placeholder="请输入产品名称"></el-input>
            <span>工序：</span>
            <el-input size="small" style="width: 224px;margin-right: 30px;" v-model="search.techfather"
               placeholder="请输入工序"></el-input>
            <el-button size="mini"><span>重 置</span></el-button>
            <el-button size="mini" @click="searchPro" type="primary" style="background: #004EA2;"><span>查
                  询</span></el-button>
         </div>
         <div class="content-body">
            <div class="inspectionTable">
               <el-table ref="inspectionTable" height="calc(100vh - 320px)" :header-cell-style="{
              border: '0px',
              background: '#f5f7fa',
              color: '#606266',
              boxShadow: 'inset 0 1px 0 #ebeef5',
            }" border :data="inspectionTable" style="width: 100%">
                  <el-table-column type="selection" width="50"> </el-table-column>
                  <el-table-column label="序号" type="index" width="60"></el-table-column>
                  <el-table-column prop="order_number" label="订单编号" min-width="90" />
                  <el-table-column prop="material" label="产品名称" min-width="80" />
                  <el-table-column prop="specifications_model" label="规格型号" min-width="60" />
                  <el-table-column prop="techfather" label="工序" min-width="70" />
                  <el-table-column prop="techname" label="工艺名称" min-width="70" />
                  <el-table-column prop="unit" label="单位" min-width="50" />
                  <el-table-column prop="quantity" label="数量" min-width="50" />
                  <el-table-column prop="createTime" label="报检日期" min-width="70" />
                  <el-table-column prop="name" label="报检人" min-width="50" />
                  <el-table-column prop="updateTime" label="检测日期" min-width="70" />
                  <el-table-column prop="result" label="合格状态" min-width="60">
                     <template slot-scope="scope">
                        <span style="color: #34BD66;" v-if="scope.row.result == 1">合格</span>
                        <span style="color: #E84738;" v-else-if="scope.row.result == 0">不合格</span>
                     </template>
                  </el-table-column>
                  <el-table-column label="操作" min-width="75">
                     <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleClick(scope.row)" style="margin-left: 0;"><span
                              style="font-size: 8px;">详情</span></el-button>
                        <el-button type="text" size="small" style="margin-left: 0;"><span
                              style="font-size: 8px;">查看</span></el-button>
                        <el-button v-if="scope.row.result == null" type="text" size="small" style="margin-left: 0;"
                           @click="updateInsInfo(scope.row)"><span style="font-size: 8px;">编辑</span></el-button>
                     </template>
                  </el-table-column>
               </el-table>
            </div>
            <!-- 分页器 -->
            <div class="pagination">
               <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper" :total="inspectionTableTotal"
                  @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
         </div>
      </div>
      <div class="newPage" v-if="showAddPage">
         <!-- 新增页面 -->
         <div class="addInspection">
            <el-row class="header">
               <el-col :span="12">新增过程检验单</el-col>
               <el-col :span="12" style="text-align: right;">
                  <!-- 点击返回，当前页面值为false -->
                  <!-- <el-button type="primary" size="mini" style="background: #004EA2; "
              icon="el-icon-circle-plus-outline">新增</el-button> -->
                  <el-button @click="combackIndex" type="primary" size="mini" icon="el-icon-back"
                     style="background: #004EA2; ">返回</el-button>
               </el-col>
            </el-row>
            <el-form :model="processInspectVo" ref="addInspectionform" class="addInspectionform" label-position="right"
               label-width="120px" size="small">
               <div class="formwrapper">
                  <el-row :gutter="230">
                     <el-col :span="7">
                        <el-form-item label="订单号：">
                           <el-input @blur="selectInfoByOrderId" style="width: 210px;" size="small"
                              v-model="processInspectVo.orderNumber" placeholder="请输入订单号" />
                        </el-form-item>
                     </el-col>
                     <el-col :span="7">
                        <el-form-item label="产品名称：">
                           <el-select style="width: 210px;" size="small" @change="selectSample"
                              v-model="processInspectVo.material" placeholder="请选择产品">
                              <el-option v-for="item in optionsSamplename" :key="item.value" :label="item.name"
                                 :value="item.name">
                              </el-option>
                           </el-select>
                        </el-form-item>
                     </el-col>
                     <el-col :span="7">
                        <el-form-item label="产品编码：">
                           <el-input style="width: 210px;" size="small" disabled v-model="processInspectVo.materialCode"
                              placeholder="请输入产品编码" />
                        </el-form-item>
                     </el-col>
                  </el-row>
                  <el-row :gutter="230">
                     <el-col :span="7">
                        <el-form-item label="规格型号：">
                           <el-input style="width: 210px;" size="small" disabled v-model="processInspectVo.specificationsModel"
                              placeholder="请输入规格型号" />
                        </el-form-item>
                     </el-col>
                     <el-col :span="7">
                        <el-form-item label="工序名称：">
                           <el-select @change="changeOptionSoptionSprocesses" v-model="processInspectVo.techfather"
                              placeholder="请选择" style="width: 210px;" size="small">
                              <el-option v-for="item in optionSoptionSprocesses" :key="item.name" :label="item.name"
                                 :value="item.name">
                              </el-option>
                           </el-select>
                        </el-form-item>
                     </el-col>
                     <el-col :span="7">
                        <el-form-item label="工艺名称：">
                           <el-select v-model="processInspectVo.techname" placeholder="请选择" style="width: 210px;" size="small">
                              <el-option v-for="item in optionTechnology" :key="item.id" :label="item.name"
                                 :value="item.id + '-' + item.name">
                              </el-option>
                           </el-select>
                        </el-form-item>
                     </el-col>
                  </el-row>
                  <el-row :gutter="230">
                     <el-col :span="7">
                        <el-form-item label="单位：">
                           <el-input style="width: 210px;" size="small" disabled v-model="processInspectVo.unit"
                              placeholder="请输入单位" />
                        </el-form-item>
                     </el-col>
                     <el-col :span="7">
                        <el-form-item label="数量：">
                           <el-input style="width: 210px;" size="small" v-model="processInspectVo.quantity"
                              placeholder="请输入数量" />
                        </el-form-item>
                     </el-col>
                     <el-col :span="10" style="display: flex;justify-content: end;">
                        <el-button type="primary" :disabled="isAddProject" @click="addTestProjevt">生成检验项目</el-button>
                     </el-col>
                  </el-row>
               </div>
            </el-form>
         </div>
         <div class="inspectionProject">
            <el-row>
               <el-col :span="12" class="inspectionProject_span">检验项目</el-col>
               <el-col :span="12" class="inspectionProject_span">
                  <el-button size="mini" @click="clickDeleteInspectionColumn()">删除检验值列</el-button>
                  <el-button style="margin-right: 30px;" size="mini" @click="clickAddInspectionColumn()">添加检验值列</el-button>
                  <!-- <el-button
              size="mini"
              style="margin-right: 30px;"
              @click="clickAddLine()"
              >添加检验行</el-button
            > -->
               </el-col>
            </el-row>
            <el-table border :data="inspectionItems" max-height="420" :span-method="handleSpanMethod"
               height="calc(100vh - 550px)" style="width: 100%">
               <el-table-column type="index" label="序号" width="60"></el-table-column>
               <el-table-column label="项目" prop="father"></el-table-column>
               <el-table-column prop="name" label="指标"></el-table-column>
               <el-table-column prop="unit" label="单位"></el-table-column>
               <el-table-column prop="required" label="标准值"></el-table-column>
               <el-table-column prop="internal" label="内测值"></el-table-column>
               <el-table-column prop="inspectionValue" v-for="(item, index) in empiricalValueAdd" :key="index" label="检测值"
                  min-width="100" style="text-align: center;">
                  <template slot-scope="scope">
                     <el-tooltip :disabled="scope.row.dname != null" class="item" effect="dark" content="请先选择设备！"
                        placement="top-start">
                        <el-input :disabled="scope.row.dname === null" v-model="scope.row.empiricalValueAddss[index]"
                           @blur="changeState(scope.row, index)" placeholder="请输入检测值"></el-input>
                     </el-tooltip>
                  </template>
               </el-table-column>
               <el-table-column prop="dname" label="试验设备" min-width="100">
                  <template slot-scope="scope">
                     <el-button type="text" @click="clickTableSelect(scope)">{{
                       scope.row.deviceId == null ? "请选择" : scope.row.deviceName
                     }}</el-button>
                  </template>
               </el-table-column>
               <el-table-column label="结论">
                  <template slot-scope="scope">
                     <span style="color: #34BD66;" v-if="scope.row.result === 1">合格</span>
                     <span style="color: #E84738;" v-else-if="scope.row.result === 0">不合格</span>
                     <span v-show="scope.row.result === null">{{null}}</span>
                  </template>
               </el-table-column>
               <!-- <el-table-column v-if="detailId == null" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="clickDeleteline(scope)">删除</el-button>
            </template>
          </el-table-column> -->
            </el-table>
         </div>
         <div class="inspectionResult">
            <span>检测结果</span>
            <el-table :data="inspectionResultForm">
               <el-table-column prop="id" label="物料编号"></el-table-column>
               <el-table-column prop="name" label="物料名称"></el-table-column>
               <el-table-column prop="inspecter" label="检验员"></el-table-column>
               <el-table-column prop="conclusion" label="检验结论"></el-table-column>
               <el-table-column prop="operation" label="上报"></el-table-column>
            </el-table>
         </div>
         <el-dialog title="请选择设备" :visible.sync="centerDialogVisible" width="20%">
            <div class="div_device_dialog">
               <el-select style="width: 100%;" @change="clickNodeSure()" v-model="filterText" placeholder="请选择">
                  <el-option v-for="item in materialOptions" :key="item.id" :label="item.device" :value="item.id">
                  </el-option>
               </el-select>
            </div>
         </el-dialog>
      </div>
      <div class="newPage" v-if="showUp">
         <processInspectionUpdate :rowInfo="rowInfp" />
      </div>
      <div class="newPage" v-if="showLook">
         <processInspectionLook :rowInfo="rowInfp" />
      </div>
   </div>
</template>

<script>
   import processInspectionUpdate from '../view/processInspectionUpdate.vue'
   import processInspectionLook from '../view/processInspectionLook.vue'
   export default {
      components: {
         processInspectionUpdate,
         processInspectionLook
      },
      data() {
         return {
            showUp: false,
            isAddProject: false,
            showLook: false,
            detailId: 28,
            rowInfp: {},
            search: {
               countSize: 10,
               pageSize: 1,
               result: "", // 检测状态
               name: "", // 产品名称
               techfather: "" // 工序
            },
            optionsSamplename: [],
            inspectionTable: [],
            tableColumn: [],
            optionSoptionSprocesses: [],
            optionTechnology: [],
            inspectionTableTotal: 0,
            pageSize: 10,
            currentPage: 1,
            treeProject: [],
            // 添加列
            empiricalValueAdd: 1,
            // 编辑时存储最长的列数字，做删除判断
            empiricalValueAddMaxNumber: 0,
            showAddPage: false,
            processInspectVo: {
               material: null,
               materialCode: null,
               orderNumber: "",
               quantity: null,
               specificationsModel: null,
               techfather: null,
               techname: null,
               technologyId: null,
               unit: null
            },
            InspectioniD: null,
            addInspectionform: [{
               number: "",
               username: "",
               projectname: "",
               tracenumber: "",
               code: "",
               class: "",
               specificationmodel: "",
               unit: "",
               quantity: "",
               group: "",
               worker: "",
               machine: ""
            }],
            inspectionItems: [], // 新增检验项目表格
            inspectionResultForm: [{
               id: "",
               name: "",
               inspecter: "",
               conclusion: "",
               operation: ""
            }],
            options: [],
            value: "",
            rowList: [],
            spanArr: [],
            position: 0,
            // 设备选择树显示
            centerDialogVisible: false,
            filterText: "",
            materialOptions: [],
            defaultProps: {
               // 设备树数据设置
               children: "children",
               label: "name"
            },
            nodeData: {
               id: 0,
               name: null
            }, // node点击保存当前点击数据
            clickSelectDevice: {
               index: null, // 点击选择存储当前行索引
               rpId: null // 点击选择存储当前行项目Id
            }
         };
      },
      watch: {
         // filterText(val) {
         //   this.$refs.tree.filter(val);
         // }
      },
      mounted() {
         // this.getTableData()
         // this.getOptions();
      },
      methods: {
         handleClick(row) {
            this.rowInfp = row
            this.showLook = true
         },
         combackIndex() {
            this.showAddPage = false
            this.defaultInitializationTable()
         },
         updateInsInfo(row) {
            this.rowInfp = row
            this.showUp = true
         },
         combackMain(val) {
            this.showUp = false
            this.showLook = false
            this.defaultInitializationTable(); // 初始化表格数据
            if (val) {
               this.$parent.removeAllTab()
            }
         },
         searchPro() {
            this.search.countSize = this.pageSize
            this.search.pageSize = this.currentPage
            this.defaultInitializationTable()
         },
         // 点击设备树保存点击记录
         nodeClick(data) {
            if (data.id != undefined) this.nodeData = data;
         },
         // 设备树过滤搜索
         filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
         },
         // 获取设备树内容
         getOptions(row) {
            this.$axios.get(this.$api.url.inspectionItemChooseDev, {
               params: {
                  father: row.father,
                  name: row.name,
                  technologyId: this.processInspectVo.technologyId
               }
            }).then(res => {
               this.materialOptions = res.data;
               if (this.materialOptions.length === 1) {
                  this.$message({
                     message: '该项目下只有一个试验设备，无需选择！',
                     type: 'warning'
                  });
                  return
               }
               row.isSelectDevice = true
               this.filterText = row.did
            });
         },
         // 点击表格选择触发
         clickTableSelect(scope) {
            this.centerDialogVisible = true;
            this.clickSelectDevice.index = scope.$index;
            this.clickSelectDevice.rpId = scope.row.id;
            this.getOptions(scope.row)
         },
         // 点击树里面的确定
         clickNodeSure() {
            let select = this.materialOptions.filter(item => {
               return item.id === this.filterText
            })[0]
            this.nodeData.id = select.id
            this.nodeData.name = select.device
            if (this.detailId == null) {
               this.inspectionItems[
                  this.clickSelectDevice.index
               ].did = this.nodeData.id;
               this.inspectionItems[
                  this.clickSelectDevice.index
               ].dname = this.nodeData.name;
               this.centerDialogVisible = false;
            } else {
               this.$axios
                  .post(this.$api.url.inspectionItemUpdateDevByInsId, {
                     id: this.clickSelectDevice.rpId,
                     type: 1,
                     devId: this.nodeData.id
                  })
                  .then(res => {
                     this.getTableData()
                     this.centerDialogVisible = false;
                  });
            }
         },
         changeState(row, index) {
            if (row.did != null && row.did != '') {
               // let val = row.empiricalValueAddss.filter(item => {
               //   return item != '' && item != null
               // })
               // let eq = val.filter(item => {
               //   return /^[^><=]/.test(item)
               // })
               // if (eq.length > 0) {
               //   this.$message({
               //     message: "检测值[" + eq + "]格式首位应包含>,<或者=",
               //     type: 'warning'
               //   });
               //   return
               // }
               let str = ""
               row.empiricalValueAddss.forEach(e => {
                  str += e + ","
               })
               if (str.slice(0, -1) === '' || str.slice(0, -1) === null || str.slice(0, -1) === undefined) {
                  return
               }
               this.$axios.post(this.$api.url.inspectionItemlose_focus_update, {
                  deviceId: row.did,
                  inspectionItemId: row.id,
                  inspectionValue: str.slice(0, -1)
               }, {
                  headers: {
                     "Content-Type": "application/json"
                  }
               }).then(res => {
                  if (res.message === '内控值输入格式有问题!') {
                     this.$message({
                        message: res.message,
                        type: 'warning'
                     });
                     return
                  }
                  row.result = res.data.result
                  row.username = res.data.username
               })
            } else {
               this.$message({
                  message: '请选择择设备！',
                  type: 'warning'
               });
            }
         },
         // 每页条数改变时触发 选择一页显示多少行
         handleSizeChange(val) {
            this.search.countSize = val;
            this.defaultInitializationTable();
         },
         handleSpanMethod({
            row,
            column,
            rowIndex,
            columnIndex
         }) {
            if (columnIndex === 0) {
               const _row = this.spanArr[rowIndex];
               const _col = _row > 0 ? 1 : 0;
               return {
                  rowspan: _row,
                  colspan: _col
               }
            }
            if (columnIndex === 1) {
               const _row = this.spanArr[rowIndex];
               const _col = _row > 0 ? 1 : 0;
               return {
                  rowspan: _row,
                  colspan: _col
               }
            }
         },
         // 合并表格
         mergeTable() {
            this.rowList = []
            this.spanArr = []
            this.position = 0
            this.inspectionItems.forEach((item, index) => {
               if (index === 0) {
                  this.spanArr.push(1);
                  this.position = 0;
               } else {
                  if (this.inspectionItems[index].father === this.inspectionItems[index - 1].father) {
                     this.spanArr[this.position] += 1;
                     this.spanArr.push(0);
                  } else {
                     this.spanArr.push(1);
                     this.position = index;
                  }
               }
            })
         },
         changeOptionSoptionSprocesses() {
            this.optionTechnology = []
            let working = this.optionSoptionSprocesses.filter(item => {
               return item.name === this.processInspectVo.techfather
            })[0]
            this.optionTechnology = working.children
         },
         addTestProjevt() {
            let val = JSON.parse(JSON.stringify(this.processInspectVo))
            val.techname = this.processInspectVo.techname.split("-")[1]
            val.technologyId = this.processInspectVo.techname.split("-")[0]
            this.processInspectVo.technologyId = val.technologyId
            this.$axios.post(this.$api.url.processInspectAddProcess, {
               material: val.material,
               materialCode: val.materialCode,
               orderNumber: val.orderNumber,
               quantity: val.quantity,
               specificationsModel: val.specificationsModel,
               techfather: val.techfather,
               techname: val.techname,
               techId: Number(val.technologyId),
               unit: val.unit
            }, {
               headers: {
                  "Content-Type": "application/json"
               }
            }).then(res => {
               if (res.code === 201) {
                  this.$message({
                     message: res.message,
                     type: 'warning'
                  });
                  return
               }
               this.isAddProject = true
               this.detailId = res.data
               this.inspectionResultForm[0].id = val.materialCode
               this.inspectionResultForm[0].name = val.material
               this.getTableData()
            })
         },
         getTableData() {
            this.$axios.get(this.$api.url.inspectionItemListUser, {
               params: {
                  id: this.detailId,
                  type: 1
               }
            }).then(res => {
               this.inspectionItems = res.data
               let arr = []
               let val = JSON.parse(JSON.stringify(this.inspectionItems))
               const uName = []
               //转成一维数组
               val.forEach(l => {
                  let father = l.father
                  l.children.forEach(c => {
                     c.father = father
                     c.empiricalValueAddss = []
                     if (c.inspectionValue != '' && c.inspectionValue != null) {
                        c.empiricalValueAddss = c.inspectionValue.split(",");
                     } else {
                        c.empiricalValueAddss.push("")
                     }
                     uName.push(c['username'])
                     c.isSelectDevice = false
                     arr.push(c)
                  })
               })
               this.inspectionItems = arr
               let arrSort = JSON.parse(JSON.stringify(arr))
               //根据集合对象数组长度排序
               arrSort.sort((a, b) => {
                  if (a.empiricalValueAddss.length < b.empiricalValueAddss.length) {
                     return -1; // a排在b前面
                  } else if (a.empiricalValueAddss.length > b.empiricalValueAddss.length) {
                     return 1; // a排在b后面
                  } else {
                     return 0; // 保持相对顺序不变
                  }
               });
               // console.log(arrSort);
               console.log(uName);
               let name = [...new Set(uName)].filter(item => item !== null);
               let rname = ''
               name.forEach(m => {
                  rname += m + ","
               })
               this.inspectionResultForm[0].inspecter = rname.slice(0, -1)
               this.empiricalValueAdd = arrSort[arrSort.length - 1].empiricalValueAddss.length
               this.mergeTable(arr)
            })
         },
         selectSample() {
            let sample = this.optionsSamplename.filter(item => {
               return item.name === this.processInspectVo.material
            })[0]
            this.processInspectVo.techfather = null
            this.processInspectVo.techname = null
            this.processInspectVo.materialCode = sample.code
            this.processInspectVo.specificationsModel = sample.specifications
            this.processInspectVo.unit = sample.unit
            this.optionSoptionSprocesses = []
            this.optionSoptionSprocesses = sample.children
         },
         selectInfoByOrderId() {
            this.$axios.get(this.$api.url.chooseMaterProcessInspect, {
               params: {
                  orderNumber: this.processInspectVo.orderNumber
               }
            }).then(res => {
               if (res.data.length > 0) {
                  console.log(res.data);
                  this.optionsSamplename = res.data
               } else {
                  this.$message({
                     message: '没有该订单号！',
                     type: 'warning'
                  });
               }
            })
         },
         // 当前页改变时触发 跳转其他页
         handleCurrentChange(val) {
            this.search.pageSize = val;
            this.defaultInitializationTable();
         },
         // 显示新增页面
         handleAddNew() {
            this.showAddPage = true;
            // this.getTableData()
         },
         // 表格初始化接口
         defaultInitializationTable() {
            this.$axios
               .post(this.$api.url.selectProcessInspectsList, this.search)
               .then(res => {
                  this.inspectionTableTotal = res.data.total;
                  this.inspectionTable = res.data.row;
               });
         },
         // 添加行
         clickAddLine() {
            let obj = {
               material: "",
               materialCode: "",
               orderNumber: "",
               quantity: 0,
               specificationsModel: "",
               techfather: "",
               techname: "",
               technologyId: 0,
               unit: ""
            };
            this.inspectionItems.push(obj);
         },
         // 删除行
         clickDeleteline(scope) {
            this.inspectionItems.splice(scope.$index, 1);
         },
         // 删除检验值列
         clickDeleteInspectionColumn() {
            if (this.empiricalValueAdd - 1 === 0) {} else {
               if (this.empiricalValueAddMaxNumber != this.empiricalValueAdd - 1) {
                  this.empiricalValueAdd = this.empiricalValueAdd - 1;
                  this.inspectionItems.forEach(i => {
                     i.testValueList.splice(this.empiricalValueAdd, 1);
                  });
               }
            }
         },
         // 添加检验值列
         clickAddInspectionColumn() {
            this.empiricalValueAdd = this.empiricalValueAdd + 1;
         }
      },
      created() {
         this.defaultInitializationTable(); // 初始化表格数据
      }
   };
</script>

<style>
   .node_i {
      color: orange;
   }

   .div_device_dialog {
      min-height: 400px;
      overflow: auto;
   }

   .nav {
      display: flex;
      padding: 20px 20px;
      align-items: center;
      background-color: #fff;
   }

   .table_header {
      height: calc(100vh - 550px);
   }

   .nav * {
      font-size: 14px;
   }

   .content-body .rawPage {
      background-color: #fff;
      overflow: hidden;
   }

   .inspectionTable {
      padding: 20px 20px;
   }

   .pagination {
      float: right;
      margin-right: 20px;
   }

   .newPage {
      overflow: hidden;
   }

   .header {
      padding: 12px;
   }

   .addInspectionform {
      background-color: #fff;
   }

   .addInspectionform .formwrapper {
      padding: 20px 0px;
      margin-left: 100px;
   }

   .inspectionProject .el-table {
      background-color: #fff;
      padding: 10px 12px;
   }

   .inspectionResult span {
      display: block;
      padding: 5px 0px;
   }

   .inspectionResult .el-table {
      background-color: #fff;
      padding: 10px 12px;
   }

   .inspectionProject_span {
      line-height: 32px;
      padding: 10px 20px;
   }

   .inspectionProject_span .el-button {
      float: right;
      font-size: 13px !important;
   }
</style>