modified: src/views/experiment/inspectionApplication/index.vue

zouyu

2023-09-09 2c4d645aa617a737d636964a7a52a1602e717e30

 src/views/experiment/inspectionApplication/index.vue

@@ -1,1044 +1,978 @@
<template>
    <div>
      <template v-if="!showDetail">
        <div class="content-main">
          <div class="top-bar">
            <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item label="申请单号:">
                <el-input
                  v-model="searchData.applicationnumber"
                  class="input-form"
                  placeholder="请输入申请单号"
                  style="width: 200px; margin-right: 20px;"
                >
                <i slot="prefix" class="el-input__icon el-icon-search" />
                </el-input>
              </el-form-item>
              <el-form-item label="检验类型:">
                <el-select v-model="searchData.type" placeholder="全部" style="width: 100px;margin-right: 20px;">
                  <el-option
                    v-for="item in typeoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="检验结果:" style="margin-right: 20px;">
                <el-select v-model="searchData.state" placeholder="全部" style="width: 100px;margin-right: 20px;">
                  <el-option
                    v-for="item in stateoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchInspections">查询</el-button>
                <el-button type="primary" plain @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
            <el-form class="rightBtn">
              <el-form-item class="createBtn">
                <el-button type="primary" icon="el-icon-document-add" @click="checkTypeVisible = true" style="background-color: rgb(1, 102, 226);">新增检验单</el-button>
              </el-form-item>
              <el-form-item class="getDataBtn">
                <el-button type="primary" icon="el-icon-download" style="background-color: rgb(1, 102, 226);">导出检验单</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="library-table">
            <div class="table-header">
              <div class="search-bar">
                <el-radio-group v-model="radioValue">
                  <el-radio-button label="全部" />
                  <el-radio-button label="待提交" />
                  <el-radio-button label="已提交" />
                  <el-radio-button label="已作废" />
                </el-radio-group>
              </div>
            </div>
            <div class="table-box">
              <el-table
                ref="inspectionTable"
                :max-height="800"
                :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"
                  min-width="30px"
                />
                <el-table-column
                  prop="icode"
                  label="申请单号"
                  min-width="100px"
                />
                <el-table-column
                  prop="type"
                  label="检验类型"
                  min-width="80px">
                  <template slot-scope="scope">
                    <div v-if="scope.row.type === 0" ><span >原材料检验</span></div>
                    <div v-if="scope.row.type === 1" ><span>委托检验</span></div>
                    <div v-if="scope.row.type === 2" ><span>成品检验</span></div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="formTime"
                  label="来料日期"
                  min-width="100px"
                />
                <el-table-column
                  prop="supplier"
                  label="供应商名称"
                  min-width="150px"
                />
                <el-table-column
                  prop="mcode"
                  label="原材料编码"
                  min-width="150px"
                />
                <el-table-column
                  prop="name"
                  label="原材料名称"
                  min-width="80px"
                />
                <el-table-column
                  prop="specifications"
                  label="规格型号"
                  min-width="160px"
                />
                <el-table-column
                  prop="unit"
                  label="单位"
                  min-width="50px"
                />
                <el-table-column
                  prop="num"
                  label="数量"
                  min-width="50px"
                />
                <el-table-column
                  prop="createTime"
                  label="登记日期"
                  min-width="80px"
                />
                <el-table-column
                  prop="userName"
                  label="登记人"
                  min-width="80px"
                />
                <el-table-column
                  prop="inspection_status"
                  label="检验结果"
                  min-width="80px">
                  <template slot-scope="scope">
                    <el-tag class="tag" :type="scope.row.inspection_status === 0 ? 'danger' : 'success'"
                    disable-transitions
                  >{{ scope.row.inspection_status === 0 ? '不合格' : '合格' }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="checkdate"
                  label="检验日期"
                  min-width="150px"
                />
                <el-table-column
                  label="操作"
                  min-width="150"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                    <!-- <el-button type="text" size="small" >提交</el-button> -->
                    <el-button type="text" size="small" >作废</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页器 -->
              <div>
                <el-pagination
                  class="pagination"
                  :current-page="currentPage"
                  :page-sizes="[ 10, 20, 30,40]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </div>
          <!-- 对话框 -->
          <div class="checkType">
            <el-dialog
              title="新增检验单"
              :visible.sync="checkTypeVisible"
              width="50%"
            >
              <div class="check-box">
                <el-radio-group v-model="type" @change="handleRadioChange">
                  <el-radio style="background-color: rgb(170, 236, 214);border-radius: 10px;" :label="0" border >原材料检验</el-radio>
                  <el-radio style="background-color: rgb(170, 236, 214);border-radius: 10px;" :label="1" border>委托检验</el-radio>
                  <el-radio style="background-color: rgb(170, 236, 214);border-radius: 10px;" :label="2" border>成品检验</el-radio>
                </el-radio-group>
              </div>
              <div v-if="type === 0 || type === ''">
                <el-form :model="infoForm" ref="infoForm" class="checkTypeForm" label-position="top" label-width="200px" size="mini">
                  <el-row :gutter="100">
                      <el-col :span="10">
                          <el-form-item label="来料日期：">
                              <el-input style="width: 300px" type="text" :value="infoForm.dateSurvey" placeholder="请输入来料日期" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="10">
                          <el-form-item label="供应商名称：">
                              <el-input style="width: 300px" type="text" :value="infoForm.supplierName" placeholder="请输入供应商名称" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      </el-row>
                      <el-row :gutter="100">
                      <el-col :span="10">
                          <el-form-item label="原材料编码：">
                              <el-input style="width: 300px" type="text" :value="infoForm.materialCoding" placeholder="请输入原材料编码" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="10">
                          <el-form-item label="原材料名称：">
                              <el-input style="width: 300px" type="text" :value="infoForm.materialName" placeholder="请输入原材料名称" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      </el-row>
                      <el-row :gutter="100">
                      <el-col :span="10">
                          <el-form-item label="规格型号：">
                              <el-input style="width: 300px" type="text" :value="infoForm.specificationsModels" placeholder="请输入规格型号" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="10">
                          <el-form-item label="单位：">
                              <el-input style="width: 300px" type="text" :value="infoForm.unit" placeholder="请输入单位" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      </el-row>
                      <el-row :gutter="100">
                      <el-col :span="10">
                          <el-form-item label="数量：">
                              <el-input style="width: 300px" type="text" :value="infoForm.quantity" placeholder="请输入数量" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="10">
                          <el-form-item label="检验时间：">
                              <el-date-picker
                                  v-model="infoForm.checkdate"
                                  type="daterange"
                                  range-separator="至"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期"
                                  style="width: 300px;">
                              </el-date-picker>
                          </el-form-item>
                      </el-col>
                      </el-row>
                </el-form>
              </div>
              <div v-if="type === 1">
                <el-form :model="commisionSelection" ref="commisionTable" class="checkTypeForm" label-position="top" label-width="200px" size="mini">
                  <el-row :gutter="100">
                      <el-col :span="10">
                          <el-form-item label="来料日期：">
                              <el-input style="width: 300px" type="text" :value="commisionSelection.formTime" placeholder="请输入来料日期" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="10">
                          <el-form-item label="供应商名称：">
                              <el-input style="width: 300px" type="text" :value="commisionSelection.supplier" placeholder="请输入委托单位" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      </el-row>
                      <el-row :gutter="100">
                      <el-col :span="10">
                          <el-form-item label="委托编号：">
                              <el-input style="width: 300px" type="text" :value="commisionSelection.mcode" placeholder="请输入样品编号" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="10">
                          <el-form-item label="委托名称：">
                              <el-input style="width: 300px" type="text" :value="commisionSelection.name" placeholder="请输入样品名称" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      </el-row>
                      <el-row :gutter="100">
                      <el-col :span="10">
                          <el-form-item label="规格型号：">
                              <el-input style="width: 300px" type="text" :value="commisionSelection.specifications" placeholder="请输入型号规格" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="10">
                          <el-form-item label="单位：">
                            <el-input style="width: 300px" type="text" :value="commisionSelection.unit" placeholder="请输入单位" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      </el-row>
                      <el-row :gutter="100">
                      <el-col :span="10">
                          <el-form-item label="数量：">
                            <el-input style="width: 300px" type="text" :value="commisionSelection.num" placeholder="请输入数量" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="10">
                          <el-form-item label="检验日期：">
                            <el-date-picker
                                  v-model="commisionSelection.checkdate"
                                  type="daterange"
                                  range-separator="至"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期"
                                  style="width: 300px;">
                            </el-date-picker>
                          </el-form-item>
                      </el-col>
                      </el-row>
                </el-form>
              </div>
              <div v-if="type === 2">
                <el-form :model="finishedTable" ref="finishedTable" class="checkTypeForm" label-position="top" label-width="200px" size="mini">
                  <el-row :gutter="100">
                      <el-col :span="10">
                          <el-form-item label="来料日期：">
                              <el-input style="width: 300px" type="text" v-model="finishedTable.deliverydate" placeholder="请输入来料日期" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="10">
                          <el-form-item label="供应商名称：">
                              <el-input style="width: 300px" type="text" v-model="finishedTable.supplier" placeholder="请输入供应商名称" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      </el-row>
                      <el-row :gutter="100">
                      <el-col :span="10">
                          <el-form-item label="原材料编码：">
                              <el-input style="width: 300px" type="text" v-model="finishedTable.code" placeholder="请输入原材料编码" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="10">
                          <el-form-item label="原材料名称：">
                              <el-input style="width: 300px" type="text" v-model="finishedTable.name" placeholder="请输入原材料名称" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      </el-row>
                      <el-row :gutter="100">
                      <el-col :span="10">
                          <el-form-item label="规格型号：">
                              <el-input style="width: 300px" type="text" v-model="finishedTable.modelandspecification" placeholder="请输入规格型号" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="10">
                          <el-form-item label="单位：">
                              <el-input style="width: 300px" type="text" v-model="finishedTable.unit" placeholder="请输入单位" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      </el-row>
                      <el-row :gutter="100">
                      <el-col :span="10">
                          <el-form-item label="数量：">
                              <el-input style="width: 300px" type="text" v-model="finishedTable.amount" placeholder="请输入数量" autocomplete="off" />
                          </el-form-item>
                      </el-col>
                      <el-col :span="10">
                          <el-form-item label="检验时间：">
                              <el-date-picker
                                  v-model="finishedTable.checkdate"
                                  type="daterange"
                                  range-separator="至"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期"
                                  style="width: 300px;">
                              </el-date-picker>
                          </el-form-item>
                      </el-col>
                      </el-row>
                </el-form>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="checkTypeVisible = false">取 消</el-button>
                <!-- <el-button type="primary" @click="addInspection">确 定</el-button> -->
                <el-button type="primary" @click="QUEding">确 定</el-button>
              </span>
            </el-dialog>
          </div>
        </div>
   <div>
      <template v-if="!showDetail">
         <div class="content-main">
            <div class="top-bar">
               <el-form ref="form" :inline="true" :model="searchData">
                  <el-form-item label="申请单号:">
                     <el-input size="small" v-model="searchData.applicationnumber" class="input-form" placeholder="请输入申请单号"
                        style="width: 200px; margin-right: 20px;">
                        <i slot="prefix" class="el-input__icon el-icon-search" />
                     </el-input>
                  </el-form-item>
                  <el-form-item label="检验类型:" width="200">
                     <el-select size="small" v-model="searchData.type" placeholder="全部" style="width: 100px;margin-right: 20px;">
                        <el-option v-for="item in typeoptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                     </el-select>
                  </el-form-item>
                  <el-form-item label="检验结果:" width="200">
                     <el-select size="small" v-model="searchData.state" placeholder="全部" style="width: 100px;margin-right: 20px;">
                        <el-option v-for="item in stateoptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                     </el-select>
                  </el-form-item>
                  <el-form-item>
                     <el-button size="small" type="primary" @click="searchInspections">查询</el-button>
                     <el-button size="small" type="primary" plain @click="reset">重置</el-button>
                  </el-form-item>
               </el-form>
               <el-form class="rightBtn">
                  <el-form-item class="createBtn">
                     <el-button size="small" type="primary" icon="el-icon-plus" @click="showAddDialog"
                        style="background-color: rgb(1, 102, 226);">新增检验单</el-button>
                  </el-form-item>
                  <el-form-item class="getDataBtn">
                     <el-button size="small" type="primary" icon="el-icon-download"
                        style="background-color: rgb(1, 102, 226);">导出检验单</el-button>
                  </el-form-item>
               </el-form>
            </div>
            <div class="library-table">
               <div class="table-box">
                  <el-table ref="inspectionTable" style="width: 100%;overflow-y: auto;max-height: 600px;" :height="600"
                     :cell-style="{textAlign: 'left'}"
                     :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'left'}"
                     :data="inspectionTable">
                     <el-table-column type="selection" min-width="30px" />
                     <el-table-column prop="icode" label="申请单号" min-width="160px" />
                     <el-table-column prop="type" label="检验类型" min-width="100px">
                        <template slot-scope="scope">
                           <div v-if="scope.row.type === 0"><el-tag type="success">原材料检验</el-tag></div>
                           <div v-if="scope.row.type === 2"><el-tag>委托检验</el-tag></div>
                           <div v-if="scope.row.type === 1"><el-tag type="warning">成品检验</el-tag></div>
                        </template>
                     </el-table-column>
                     <el-table-column prop="formTime" label="来料日期" min-width="90px" />
                     <el-table-column prop="supplier" label="供应商名称" min-width="150px" show-overflow-tooltip />
                     <el-table-column prop="mcode" label="原材料编码" min-width="170px" />
                     <el-table-column prop="name" label="原材料名称" min-width="90px" />
                     <el-table-column prop="specifications" label="规格型号" min-width="160px" />
                     <el-table-column prop="unit" label="单位" min-width="50px" />
                     <el-table-column prop="num" label="数量" min-width="50px" />
                     <el-table-column prop="createTime" label="登记日期" min-width="90px" />
                     <el-table-column prop="inspection_status" label="检验结果" min-width="95px">
                        <template slot-scope="scope">
                           <el-tag style="text-align: center;" class="tag" effect="dark" type="danger" disable-transitions
                              v-if="scope.row.inspection_status == 0">不合格</el-tag>
                           <el-tag style="text-align: center;" class="tag" effect="dark" type="success" disable-transitions
                              v-else-if="scope.row.inspection_status == 1">合格</el-tag>
                        </template>
                     </el-table-column>
                     <el-table-column prop="userName" label="登记人" min-width="80px" />
                     <el-table-column prop="checkdate" label="检验日期" min-width="170px" />
                     <el-table-column label="操作" min-width="120" fixed="right">
                        <template slot-scope="scope">
                           <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                           <el-button type="text" size="small" @click="delInspect(scope.row)">作废</el-button>
                        </template>
                     </el-table-column>
                  </el-table>
                  <!-- 分页器 -->
                  <div>
                     <el-pagination class="pagination" :current-page="currentPage" :page-sizes="[ 10, 20, 30,40]"
                        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                  </div>
               </div>
            </div>
            <!-- 对话框 -->
            <div class="checkType">
               <el-dialog title="新增检验单" :visible.sync="checkTypeVisible" width="50%" top="10vh">
                  <div class="check-box">
                     <el-radio-group v-model="type" @click.native="handleRadioChange">
                        <el-radio :style="`background-color: ${type==0?'rgb(170, 236, 214)':'#fff'};border-radius: 10px;`"
                           :label="0" border>原材料检验</el-radio>
                        <el-radio :style="`background-color: ${type==2?'rgb(170, 236, 214)':'#fff'};border-radius: 10px;`"
                           :label="2" border>委托检验</el-radio>
                        <el-radio :style="`background-color: ${type==1?'rgb(170, 236, 214)':'#fff'};border-radius: 10px;`"
                           :label="1" border>成品检验</el-radio>
                     </el-radio-group>
                  </div>
                  <div v-if="type === 0">
                     <el-form :model="infoForm" ref="infoForm" class="checkTypeForm" label-position="top" label-width="200px"
                        size="medium">
                        <el-row :gutter="100">
                           <el-col :span="10">
                              <el-form-item label="来料日期：">
                                 <el-date-picker style="width: 300px" disabled v-model="infoForm.formTime" type="date" placeholder="选择日期">
                                 </el-date-picker>
                              </el-form-item>
                           </el-col>
                           <el-col :span="10">
                              <el-form-item label="供应商名称：">
                                 <el-input style="width: 300px" type="text" disabled :value="infoForm.supplier" placeholder="请输入供应商名称"
                                    autocomplete="off" />
                              </el-form-item>
                           </el-col>
                        </el-row>
                        <el-row :gutter="100">
                           <el-col :span="10">
                              <el-form-item label="原材料编码：">
                                 <el-input style="width: 300px" type="text" disabled :value="infoForm.mcode" placeholder="请输入原材料编码"
                                    autocomplete="off" />
                              </el-form-item>
                           </el-col>
                           <el-col :span="10">
                              <el-form-item label="原材料名称：">
                                 <el-input style="width: 300px" type="text" disabled :value="infoForm.name" placeholder="请输入原材料名称"
                                    autocomplete="off" />
                              </el-form-item>
                           </el-col>
                        </el-row>
                        <el-row :gutter="100">
                           <el-col :span="10">
                              <el-form-item label="规格型号：">
                                 <el-input style="width: 300px" type="text" disabled :value="infoForm.specifications" placeholder="请输入规格型号"
                                    autocomplete="off" />
                              </el-form-item>
                           </el-col>
                           <el-col :span="10">
                              <el-form-item label="单位：">
                                 <el-input style="width: 300px" type="text" disabled :value="infoForm.unit" placeholder="请输入单位"
                                    autocomplete="off" />
                              </el-form-item>
                           </el-col>
                        </el-row>
                        <el-row :gutter="100">
                           <el-col :span="10">
                              <el-form-item label="数量：">
                                 <el-input style="width: 300px" type="text" disabled :value="infoForm.num" placeholder="请输入数量"
                                    autocomplete="off" />
                              </el-form-item>
                           </el-col>
                           <el-col :span="10">
                              <el-form-item label="检验时间：">
                                 <el-date-picker v-model="infoForm.checkdate" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期" style="width: 300px;">
                                 </el-date-picker>
                              </el-form-item>
                           </el-col>
                        </el-row>
                     </el-form>
                  </div>
                  <div v-if="type === 2">
                     <el-form :model="commisionSelection" ref="commisionSelection" class="checkTypeForm" label-position="top"
                        label-width="200px" size="mini">
                        <el-row :gutter="100">
                           <el-col :span="10">
                              <el-form-item label="委托编号">
                                 <el-input style="width: 300px" type="text" disabled :value="commisionSelection.entrustCoding"
                                    placeholder="请输入来料日期" autocomplete="off" />
                              </el-form-item>
                           </el-col>
                           <el-col :span="10">
                              <el-form-item label="委托单位">
                                 <el-input style="width: 300px" type="text" disabled :value="commisionSelection.supplier"
                                    placeholder="请输入委托单位" autocomplete="off" />
                              </el-form-item>
                           </el-col>
                        </el-row>
                        <el-row :gutter="100">
                           <el-col :span="10">
                              <el-form-item label="样品编号">
                                 <el-input style="width: 300px" type="text" disabled :value="commisionSelection.mcode" placeholder="请输入样品编号"
                                    autocomplete="off" />
                              </el-form-item>
                           </el-col>
                           <el-col :span="10">
                              <el-form-item label="样品名称">
                                 <el-input style="width: 300px" type="text" disabled :value="commisionSelection.name" placeholder="请输入样品名称"
                                    autocomplete="off" />
                              </el-form-item>
                           </el-col>
                        </el-row>
                        <el-row :gutter="100">
                           <el-col :span="10">
                              <el-form-item label="规格型号：">
                                 <el-input style="width: 300px" type="text" disabled :value="commisionSelection.specifications"
                                    placeholder="请输入规格型号" autocomplete="off" />
                              </el-form-item>
                           </el-col>
                           <el-col :span="10">
                              <el-form-item label="送达时间">
                                 <el-input style="width: 300px" type="text" disabled :value="commisionSelection.formTime"
                                    placeholder="请输入送达时间" autocomplete="off" />
                              </el-form-item>
                           </el-col>
                        </el-row>
                        <el-row :gutter="100">
                           <el-col :span="10">
                              <el-form-item label="完成期限">
                                 <el-input style="width: 300px" type="text" disabled :value="commisionSelection.endTime"
                                    placeholder="请输入完成期限" autocomplete="off" />
                              </el-form-item>
                           </el-col>
                           <el-col :span="10">
                              <el-form-item label="检验日期：">
                                 <el-date-picker v-model="commisionSelection.checkdate" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期" style="width: 300px;">
                                 </el-date-picker>
                              </el-form-item>
                           </el-col>
                        </el-row>
                     </el-form>
                  </div>
                  <div v-if="type === 1">
                     <el-form :model="finishedTable" ref="finishedTable" class="checkTypeForm" label-position="top"
                        label-width="200px" size="mini">
                        <el-row :gutter="100">
                           <el-col :span="10">
                              <el-form-item label="成品编码：">
                                 <el-input style="width: 300px" type="text" disabled v-model="finishedTable.code" placeholder="请输入成品编码"
                                    autocomplete="off" />
                              </el-form-item>
                           </el-col>
                           <el-col :span="10">
                              <el-form-item label="成品名称：">
                                 <el-select style="width: 300px" v-model="finishedTable.name" @change="getSpecifications">
                                    <el-option v-for="(item,index) in mList" :key="index" :label="item.name" :value="item.id"></el-option>
                                 </el-select>
                              </el-form-item>
                           </el-col>
                        </el-row>
                        <el-row :gutter="100">
                           <el-col :span="10">
                              <el-form-item label="规格型号：">
                                    <el-cascader style="width: 300px" v-model="finishedTable.modelandspecification" 
                                    :options="specificationList" @change="changeSpe"
                                    :props="{label:'name',value:'id',children:'children'}"></el-cascader>
                              </el-form-item>
                           </el-col>
                           <el-col :span="10">
                              <el-form-item label="单位：">
                                 <el-input style="width: 300px" type="text" v-model="finishedTable.unit" placeholder="请输入单位"
                                    autocomplete="off" />
                              </el-form-item>
                           </el-col>
                        </el-row>
                        <el-row :gutter="100">
                           <el-col :span="10">
                              <el-form-item label="数量：">
                                 <el-input style="width: 300px" min="0" type="number" v-model="finishedTable.amount" placeholder="请输入数量"
                                    autocomplete="off" />
                              </el-form-item>
                           </el-col>
                           <el-col :span="10">
                              <el-form-item label="检验时间：">
                                 <el-date-picker v-model="finishedTable.checkdate" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期" style="width: 300px;">
                                 </el-date-picker>
                              </el-form-item>
                           </el-col>
                        </el-row>
                     </el-form>
                  </div>
                  <span slot="footer" class="dialog-footer">
                     <el-button @click="checkTypeVisible = false">取 消</el-button>
                     <el-button type="primary" @click="QUEding">确 定</el-button>
                  </span>
               </el-dialog>
            </div>
         </div>
         <!-- 确定跳转基本库弹窗 -->
         <el-dialog title="标准库" :visible.sync="Standardframe" width="49%">
            <el-card>
               <template slot-scope="scope">
                  <span>版本选择：</span>
                  <el-select @change="getProductVerison" v-model="version" size="small" slot="append" style="width: 220px;">
                     <el-option v-for="(item,index) in BANben" :key="index" :label="item.label" :value="item.value"></el-option>
                  </el-select>
               </template>
            </el-card>
            <el-table :data="tableData" style="width: 100%; margin-bottom: 20px;overflow-y: auto;" row-key="id" border height="40vh"
               default-expand-all ref="multipleTable" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
               <el-table-column type="index" width="50px" label="序号"></el-table-column>
               <el-table-column prop="name" label="项目名称" sortable>
               </el-table-column>
               <el-table-column prop="unit" label="单位" sortable></el-table-column>
               <el-table-column prop="required" label="标准值" sortable>
               </el-table-column>
               <el-table-column prop="internal" label="内控值" sortable>
               </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
               <el-button @click="Standardframe = false">取 消</el-button>
               <el-button type="primary" @click="GOfrom">确 定</el-button>
            </span>
         </el-dialog>
         <!-- 原材料检验模态框 -->
         <el-dialog title="原材料检验" :visible.sync="rawmaterialVisible" width="60%" top="100px">
            <div class="table-box">
               <el-table ref="multipleTable" :max-height="600" :cell-style="{textAlign: 'center'}"
                  :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
                  :data="rawMaterialTable" style="width: 100%" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" min-width="10%" />
                  <el-table-column type="index" label="序号" min-width="8%" />
                  <el-table-column prop="formTime" label="来料日期" min-width="8%" />
                  <el-table-column prop="supplier" label="供应商名称" min-width="12%" />
                  <el-table-column prop="mcode" label="材料编码" min-width="8%" />
                  <el-table-column prop="name" label="材料名称" min-width="8%" />
                  <el-table-column prop="specifications" label="规格型号" min-width="12%" />
                  <el-table-column prop="unit" label="单位" min-width="5%" />
                  <el-table-column prop="num" label="数量" min-width="5%" />
                  <el-table-column prop="endTime" label="报检日期" min-width="8%" />
                  <el-table-column prop="surveyor" label="检验人" min-width="8%" />
                  <el-table-column prop="startTime" label="检验日期" min-width="8%" />
                  <el-table-column prop="type" label="状态" min-width="8%">
                     <template>
                        <span style="color: red">待检验</span>
                     </template>
                  </el-table-column>
               </el-table>
               <span slot="footer" class="dialog-footer">
                  <el-button @click="rawmaterialVisible = false">取 消</el-button>
                  <el-button type="primary" @click="handleRawMaterialSelection">确 定</el-button>
               </span>
            </div>
         </el-dialog>
         <!-- 委托检验模态框 -->
         <el-dialog title="委托检验" :visible.sync="commisionVisible" width="60%">
            <div class="table-box">
               <el-table ref="multipleTable" :max-height="800" :cell-style="{textAlign: 'center'}"
                  :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
                  :data="commisionTable" @selection-change="handleSelectionChange" style="width: 100%">
                  <el-table-column type="selection" min-width="10%" />
                  <el-table-column type="index" label="序号" min-width="10%" />
                  <el-table-column prop="entrustCoding" label="委托编号" min-width="10%" />
                  <el-table-column prop="supplier" label="委托单位" min-width="12%" />
                  <el-table-column prop="mcode" label="样品编号" min-width="8%" />
                  <el-table-column prop="name" label="样品名称" min-width="8%" />
                  <el-table-column prop="specifications" label="规格型号" min-width="12%" />
                  <el-table-column prop="formTime" label="送达时间" min-width="8%" />
                  <el-table-column prop="endTime" label="完成期限" min-width="8%" />
                  <el-table-column prop="contacts" label="委托编制人" min-width="8%" />
                  <el-table-column prop="endTime" label="检验日期" min-width="8%" />
                  <el-table-column prop="inspection_status" label="状态" min-width="8%">
                     <template slot-scope="scope">
                        <div v-if="scope.row.inspection_status === 1">
                           <span style="color: green;">已检测</span>
                        </div>
                        <div v-else>
                           <span style="color: red;">待检测</span>
                        </div>
                     </template>
                  </el-table-column>
               </el-table>
               <span slot="footer" class="dialog-footer">
                  <el-button @click="commisionVisible = false">取 消</el-button>
                  <el-button type="primary" @click="handleCommisionSelection">确 定</el-button>
               </span>
            </div>
         </el-dialog>
      </template>
      <template v-else>
         <router-view />
      </template>
   </div>
</template>

        <!-- 确定跳转基本库弹窗 -->
        <el-dialog
              title="标准库"
              :visible.sync="Standardframe"
              width="48%"
<script>
   import {
      selectInspectsList,
      selectAll,
      addInspect,
      chooseVer,
      lookProByVer,
      delInspect,
      getSpecificationByMaterielId,
      getMaterielList
   } from '@/api/experiment/planAssignments'
   export default {
      data() {
         return {
            speName:"",
            specificationList: [],
            mList:[],
            showDetail: false,
            searchData: {
               applicationnumber: '',
               type: '',
               state: '',
            },
            valu: {},
            inputValue: '',
            icode: '',
            inspectionTable: [],
            rawMaterialTable: [],
            commisionTable: [],
            finishedTable: {
               code: '',
               name: '',
               modelandspecification: '',
               unit: '',
               amount: '',
               checkdate: []
            },
            selectedValue: null,
            infoForm: {},
            commisionSelection: {
               entrustCoding: '',
               entrusted: '',
               samples_number: '',
               sample_name: '',
               specifications_models: '',
               dateSurvey: '',
               completionDeadline: '',
               contacts: '',
               inspectionTime: ''
            },
            typeoptions: [{
               value: 0,
               label: '原材料检验'
            }, {
               value: 1,
               label: '委托检验'
            }, {
               value: 2,
               label: '成品检验'
            }],
            stateoptions: [{
               value: 0,
               label: '不合格'
            }, {
               value: 1,
               label: '合格'
            }],
            options: [{
               value: '0',
               label: '选项1'
            }, {
               value: '1',
               label: '选项2'
            }],
            currentPage: 1,
            total: 20, // 总条数
            pageSize: 10, // 每页的数据条数
            radioValue: '全部',
            checkTypeVisible: false,
            type: 1, // 默认不选中的状态
            rawmaterialVisible: false,
            commisionVisible: false,
            tmp: {},
            Standardframe: false,
            tableData: [],
            tableRow: {},
            BANben: [],
            version: null,
            listdata: [],
            ddd: {}
         }
      },
      watch: {
         $route: {
            handler(val, oldval) {},
            // 深度观察监听
            deep: true
         },
         checkTypeVisible(newVal){
            if(newVal == false){
               this.finishedTable = {
                  code: '',
                  name: '',
                  modelandspecification: '',
                  unit: '',
                  amount: '',
                  checkdate: []
               };
               this.infoForm = {};
               this.commisionSelection = {
                  entrustCoding: '',
                  entrusted: '',
                  samples_number: '',
                  sample_name: '',
                  specifications_models: '',
                  dateSurvey: '',
                  completionDeadline: '',
                  contacts: '',
                  inspectionTime: ''
               };
            }
         }
      },
      created() {
         this.selectInspectsList()
      },
      updated() {
         if (this.$route.name === 'ForInspectionDetail') this.showDetail = true
      },
      methods: {
         changeSpe(val){
            console.log(val);
            this.tmp.specificationsId = val[val.length-1];
            let arr1 = this.specificationList.filter(item=>{
               return item.id==val[0]
            });
            let arr2 = arr1[0].children.filter(item=>{
               return item.id = val[1]
            })
            let speName = arr1[0].name + "-" + arr2[0].name;
            this.speName = speName;
            console.log(arr1);
            console.log(arr2);

              >
              <!-- <el-form :model="form">
                <el-form-item label="请选择审核结果:" :label-width="formLabelWidth">
                </el-form-item>
              </el-form> -->
         },
         getSpecifications(val){
            if(val != null){
               this.selectSpecificationByMaterielId(val);
               let item = this.mList.filter(item => {
                     return item.id == val;
               });
               this.finishedTable.code = item[0].code;
               this.tmp.mcode = item[0].code;
               this.tmp.name = item[0].name;
            }
         },
         async selectSpecificationByMaterielId(mId){
            await getSpecificationByMaterielId({id : mId}).then(res=>{
               this.specificationList = res.data.children;
            }).catch(error => {
               this.$message.error(error.message);
            });
         },
         //显示新增检验单模态框
         showAddDialog(){
            this.selectMaterielList();
            this.checkTypeVisible = true
         },
         //获取成品信息
         async selectMaterielList(){
            await getMaterielList().then(res=>{
               this.mList = res.data
            }).catch(error => {
               this.$message.error(error.message);
            });
         },
         async selectAll() {

              <!-- <div slot="footer" class="dialog-footer"> -->
                <el-table
                    :data="tableData"
                    style="width: 100%; margin-bottom: 20px"
                    row-key="name"
                    border
                    height="calc(100vh - 250px)"
                    default-expand-all
                    ref="multipleTable"
                    @select="selectTr"
                    @select-all="selectAll"
                    :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> -->
            </el-dialog>
            const res = selectAll({
               type: 0
            })
            this.rawMaterialTable = res.data
         },
         async selectAll() {
            const res = selectAll({
               type: 2
            })
            this.commisionTable = res.data
         },
         async handleClick(row) {
            // this.$router.push({
            //    name: 'Viewdetails',
            //    query: {
            //       id: row.id
            //    }
            // });
            this.$router.push(`Viewdetails/${row.id}`);
         },
         //版本库
         async chooseVer() {
            const res = await chooseVer({
               mcode: this.tmp.mcode,
               name: this.tmp.name,
               specifications: this.tmp.specificationsId
            })
            this.BANben = []
            res.data.forEach(a => {
               this.BANben.push({
                  label: "V" + a,
                  value: a
               })
            })
            this.version = this.BANben[0].value;
            this.lookProByVerFun()
         },
         //标准库
         async lookProByVerFun() {
            const res = await lookProByVer({
               mcode: this.tmp.mcode,
               name: this.tmp.name,
               specifications: this.tmp.specificationsId,
               version: this.version
            })
            this.tableData = res.data
         },
         getProductVerison(val) {
            this.version = val
            this.lookProByVerFun()
         },
         async selectInspectsList() {
            // 获取分页列表
            const res = await selectInspectsList({
               countSize: this.pageSize,
               pageSize: this.currentPage,
               message: this.id
            })
            const data = res.data.row
            data.forEach((item) => {
               var formTime = item["form_time"]
               var startTime = item["start_time"]
               var endTime = item["end_time"]
               var checkdate = startTime + '~' + endTime
               var createTime = item["create_time"]
               item['formTime'] = formTime // 来料日期
               item['checkdate'] = checkdate // 检验日期
               item['createTime'] = createTime // 登记日期
            })
            this.inspectionTable = data
            this.total = res.data.total
         },
         async searchInspections() {
            const res = await selectInspectsList({
               countSize: this.pageSize,
               pageSize: this.currentPage,
               message: this.searchData.applicationnumber
            })
            var data = res.data.row
            data.forEach((item) => {
               var formTime = item["form_time"]
               var startTime = item["start_time"]
               var endTime = item["end_time"]
               var checkdate = startTime + '~' + endTime
               var createTime = item["create_time"]
               item['formTime'] = formTime // 来料日期
               item['checkdate'] = checkdate // 检验日期
               item['createTime'] = createTime // 登记日期
            })
            this.inspectionTable = data
            if (this.searchData.type !== '') {
               if (this.searchData.state !== '') {
                  this.inspectionTable = data.filter((item) => {
                     return item.type === this.searchData.type && item.inspection_status === this.searchData.state
                  })
               } else {
                  this.inspectionTable = data.filter((item) => {
                     return item.type === this.searchData.type
                  })
               }
            } else {
               if (this.searchData.state !== '') {
                  this.inspectionTable = data.filter((item) => {
                     return item.inspection_status === this.searchData.state
                  })
               }
            }
            this.total = this.res.data.total;
         },
         reset() {
            this.countSize = 1;
            this.pageSize = 10;
            this.searchData = {
               applicationnumber: '',
               type: '',
               state: '',
            };
            this.selectInspectsList();
         },
         //被选中的信息 单选
         handleSelectionChange(val) {
            if (val.length > 1) {
               this.$refs.multipleTable.clearSelection();
               this.$refs.multipleTable.toggleRowSelection(val.pop())
            }
            this.tmp = val[0]
         },
         handleCommisionSelection() {
            this.commisionSelection = this.tmp
            this.commisionSelection.checkdate = []
            this.commisionVisible = false
         },
         handleRawMaterialSelection() {
            this.infoForm = this.tmp
            this.rawmaterialVisible = false
         },
         handleRadioChange() {
            setTimeout(() => {
               if (this.type === 0) {
                  // 原材料报检
                  this.rawmaterialVisible = true
                  selectAll({
                     type: 0
                  }).then(res => {
                     var data = res.data
                     data.forEach((item) => {
                        var checkdate = []
                        checkdate.push(item['createTime'])
                        checkdate.push(item['updateTime'])
                        item['checkdate'] = checkdate // 检验日期
                     })
                     let arr = res.data.filter((val)=>{
                        return val.type === 0;
                     })
                     this.rawMaterialTable = arr
                  })
               } else if (this.type === 2) {
                  this.commisionVisible = true
                  selectAll({
                     type: 2
                  }).then(res => {
                     var data = res.data
                     data.forEach((item) => {
                        var checkdate = []
                        checkdate.push(item['createTime'])
                        checkdate.push(item['updateTime'])
                        item['checkdate'] = checkdate // 检验日期
                     })
							
                     this.commisionTable = res.data
                  })
               }
            }, 100)
         },
         // 新增检验
         async addInspection() {
            let obj = {};
            //原材料
            if (this.type === 0) {
               obj = {
                  endTime: this.infoForm.checkdate[1],
                  formTime: this.infoForm.formTime,
                  mcode: this.infoForm.mcode,
                  name: this.infoForm.name,
                  num: this.infoForm.num,
                  specifications: this.infoForm.specifications,
                  specificationId: this.infoForm.specificationsId,
                  startTime: this.infoForm.checkdate[0],
                  supplier: this.infoForm.supplier,
                  type: this.type,
                  unit: this.infoForm.unit,
                  version: this.version
               }
            }
            //委托
            if (this.type === 2) {
               obj = {
                  endTime: this.commisionSelection.checkdate[1],
                  formTime: this.commisionSelection.formTime,
                  mcode: this.commisionSelection.mcode,
                  name: this.commisionSelection.name,
                  num: this.commisionSelection.num,
                  specifications: this.commisionSelection.specifications,
                  specificationId:this.commisionSelection.specificationsId,
                  startTime: this.commisionSelection.checkdate[0],
                  supplier: this.commisionSelection.supplier,
                  type: this.type,
                  unit: this.commisionSelection.unit,
                  version: this.version
               }
            }
            //成品
            if (this.type === 1) {
               obj = {
                  supplier:"supplier",
                  formTime: "2023-09-09",
                  endTime: this.finishedTable.checkdate[1],
                  mcode: this.finishedTable.code,
                  name: this.tmp.name,
                  num: parseInt(this.finishedTable.amount),
                  specifications: this.speName,
                  specificationId: this.finishedTable.modelandspecification[1],
                  startTime: this.finishedTable.checkdate[0],
                  type: this.type,
                  unit: this.finishedTable.unit,
                  version: this.version
               }
            }
            addInspect(obj).then(res => {
               this.$message({
                  message: '添加成功！',
                  type: 'success'
               });
               this.type = 1
               this.checkTypeVisible = false
               this.$router.push(`Viewdetails/${res.data}`)
            }).catch(error=>{
               this.$message.error(error.message);
            })
         },
         // 每页条数改变时触发 选择一页显示多少行
         handleSizeChange(val) {
            // this.currentPage = 1
            this.pageSize = val
            this.selectInspectsList()
         },
         // 当前页改变时触发 跳转其他页
         handleCurrentChange(val) {
            this.currentPage = val
            this.selectInspectsList()
         },
         //确定跳转
         QUEding() {
            if (this.type==0 &&(this.infoForm.checkdate[0] == undefined || this.infoForm.checkdate[1] == undefined)) {
               this.$message({
                  message: '请选择检验时间',
                  type: 'warning'
               });
               return;
            }
            this.Standardframe = true
            this.skipshow()
            this.chooseVer()
         },
         //新增的数据
         skipshow() {
            const data = this.inspectionTable.at(-1)
            this.listdata = data
         },
         //確定詳情頁
         async GOfrom() {
            this.addInspection()
         },
         delInspect(row){
            this.$confirm('您确认删除这条数据吗?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
            }).then(() => {
               delInspect({
                  id: row.id
               }).then(()=>{
                  this.$message.success('已作废')
                  this.selectInspectsList()
               })
            }).catch(() => {});
         }
      }
   }
</script>

        <!-- 原材料检验模态框 -->
        <el-dialog
        title="原材料检验"
        :visible.sync="rawmaterialVisible"
        width="60%">
          <div class="table-box">
            <el-table
              ref="multipleTable"
              :max-height="800"
              :cell-style="{textAlign: 'center'}"
              :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
              :data="rawMaterialTable"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                label=""
                min-width="10%"
              />
              <el-table-column
                type="index"
                label="序号"
                min-width="8%"
              />
              <el-table-column
                prop="dateSurvey"
                label="来料日期"
                min-width="8%"
              />
              <el-table-column
                prop="supplierName"
                label="供应商名称"
                min-width="12%"
              />
              <el-table-column
                prop="materialCoding"
                label="材料编码"
                min-width="8%"
              />
              <el-table-column
                prop="materialName"
                label="材料名称"
                min-width="8%"
              />
              <el-table-column
                prop="specificationsModels"
                label="规格型号"
                min-width="12%"
              />
              <el-table-column
                prop="unit"
                label="单位"
                min-width="5%"
              />
              <el-table-column
                prop="quantity"
                label="数量"
                min-width="5%"
              />
              <el-table-column
                prop="inspectionDate"
                label="报检日期"
                min-width="8%"
              />
              <el-table-column
                prop="surveyor"
                label="检验人"
                min-width="8%"
              />
              <el-table-column
                prop="createTime"
                label="检验日期"
                min-width="8%"
              />
              <el-table-column
                prop="state"
                label="状态"
                min-width="8%"
              >
              <template slot-scope="scope">
                <span :style="{ color: scope.row.state === 1 ? 'green' : 'red' }">
                  {{ scope.row.state===1 ? '已检测':'待检测' }}
                </span>
              </template>
              </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rawmaterialVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleRawMaterialSelection">确 定</el-button>
            </span>
          </div>
        </el-dialog>
        <!-- 委托检验模态框 -->
        <el-dialog
        title="委托检验"
        :visible.sync="commisionVisible"
        width="60%">
          <div class="table-box">
            <el-table
                ref="multipleTable"
                :max-height="800"
                :cell-style="{textAlign: 'center'}"
                :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
                :data="commisionTable"
                @selection-change="handleSelectionChange"
                style="width: 100%"
              >
                <el-table-column
                  type="selection"
                  min-width="10%"
                />
                <el-table-column
                  type="index"
                  label="序号"
                  min-width="10%"
                />
                <el-table-column
                  prop="formTime"
                  label="委托bian'ha"
                  min-width="10%"
                />
                <el-table-column
                  prop="supplier"
                  label="供应商名称"
                  min-width="12%"
                />
                <el-table-column
                  prop="mcode"
                  label="材料编码"
                  min-width="8%"
                />
                <el-table-column
                  prop="specifications"
                  label="规格型号"
                  min-width="8%"
                />
                <el-table-column
                  prop="unit"
                  label="单位"
                  min-width="12%"
                />
                <el-table-column
                  prop="num"
                  label="数量"
                  min-width="8%"
                />
                <el-table-column
                  prop="checkdate_"
                  label="检验日期"
                  min-width="8%"
                />
              </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="commisionVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleCommisionSelection">确 定</el-button>
              </span>
          </div>
        </el-dialog>
      </template>
      <template v-else>
        <router-view />
<style lang="scss" scoped>
   .checkType {
      .check-box {
         .el-radio-group {
            display: flex;
            justify-content: space-around;

      </template>
    </div>
  </template>
            .el-radio {

  <script>
  import { selectInspectsList, selectAll, addInspect,getCommisionList} from '@/api/experiment/planAssignments'
  export default {
    data() {
      return {
        showDetail: false,
        searchData: {
          applicationnumber: '',
          type: '',
          state: '',
        },
        icode:'',
        inspectionTable: [],
        rawMaterialTable: [],
        commisionTable: [{
          specifications_models: "GGXH-AAAAA",
          inspectionTime: "2023-08-03",
          id: 2,
          samples_number: 0,
          dateSurvey: "2023-08-03",
          entrusted: "阿里巴巴",
          completionDeadline: "2023-08-03",
          contacts: "小黑",
          entrust_coding: "SL20230803000003",
          sample_name: "发动机",
          inspection_status: 1
        },{
          specifications_models: "GGXH-AAAAA",
          inspectionTime: "2023-08-03",
          id: 2,
          samples_number: 0,
          dateSurvey: "2023-08-03",
          entrusted: "阿里巴巴",
          completionDeadline: "2023-08-03",
          contacts: "小黑",
          entrust_coding: "SL20230803000003",
          sample_name: "发动机",
          inspection_status: 1
        }],
        finishedTable: {
          deliverydate: '',
          supplier: '',
          code: '',
          name: '',
          modelandspecification: '',
          unit: '',
          amount: '',
          checkdate: []
        },
        infoForm:'',
        commisionSelection:{
          entrust_coding: '',
          entrusted: '',
          samples_number: '',
          sample_name: '',
          specifications_models: '',
          dateSurvey: '',
          completionDeadline: '',
          contacts: '',
          inspectionTime: ''
        },
        typeoptions:[{
          value: 0,
          label:'原材料检验'
        },{
          value: 1,
          label: '委托检验'
        },{
          value: 2,
          label: '成品检验'
        }],
        stateoptions:[{
          value: 0,
          label:'不合格'
        },{
          value: 1,
          label:'合格'
        }],
        options:[{
          value: '0',
          label: '选项1'
        },{
          value:'1',
          label: '选项2'
        }],
        currentPage: 1,
        total: 20, // 总条数
        pageSize: 8, // 每页的数据条数
        radioValue: '全部',
        checkTypeVisible: false,
        type: '', // 默认不选中的状态
        rawmaterialVisible: false,
        commisionVisible: false,
        tmp: '',
        Standardframe: false
      }
    },
    watch: {
      $route: {
        handler(val, oldval) {
          console.log(val)// 新路由信息
          console.log(oldval)// 老路由信息
        },
        // 深度观察监听
        deep: true
      }
    },
    created() {
      this.selectInspectsList()
    },
    updated() {
      if (this.$route.name === 'ForInspectionDetail') this.showDetail = true
    },
    methods: {
      async handleClick(row){
        // console.log(item);
        // const res = await ddd({goodId:id})
        // this.$message({
        //   message: '恭喜你，这是一条成功消息',
        //   type: 'success'
        // });
               // display: flex;
               // align-items: center;
               &.is-checked {
                  background: #ecf5ff;
                  border-color: #b3d8ff;

        // console.log(res);
        this.inspectionTable = row;
        console.log(row.id);
        this.id = row.id
        this.$router.push({name:'Viewdetails',query: {id:row.id}});
        this.selectInspectsList()
      },
      //委托检验
      async getCommisionList() {
        const res = await getCommisionList({pageNo:1,pageSize:10 })
        this.commisionTable = res.data
        console.log(this.commisionTable);
      },
      async selectInspectsList() {
        // 获取分页列表
        const res = await selectInspectsList({ countSize: this.pageSize, pageSize: this.currentPage,message:this.id})
        // this.inspectionTable = data
        // console.log(res.data.row)
        const data = res.data.row
        data.forEach((item) => {
          var formTime = item["DATE_FORMAT(`form_time`,'%Y-%m-%d')"]
          var startTime = item["DATE_FORMAT(i"]["`start_time`,'%Y-%m-%d')"]
          var endTime = item["DATE_FORMAT(i"]["`end_time`,'%Y-%m-%d')"]
          var checkdate = startTime + '~' + endTime
          var createTime = item["DATE_FORMAT(i"]["`create_time`,'%Y-%m-%d')"]
          item['formTime'] = formTime // 来料日期
          item['checkdate'] = checkdate // 检验日期
          item['createTime'] = createTime // 登记日期
      })
        this.inspectionTable = data
        this.total = res.data.total
      },
      async searchInspections(){
        const res = await selectInspectsList({countSize:this.pageSize,pageSize:this.currentPage,message:this.searchData.applicationnumber})
        var data = res.data.row
        data.forEach((item) => {
          var formTime = item["DATE_FORMAT(`form_time`,'%Y-%m-%d')"]
          var startTime = item["DATE_FORMAT(i"]["`start_time`,'%Y-%m-%d')"]
          var endTime = item["DATE_FORMAT(i"]["`end_time`,'%Y-%m-%d')"]
          var checkdate = startTime + '~' + endTime
          var createTime = item["DATE_FORMAT(i"]["`create_time`,'%Y-%m-%d')"]
          item['formTime'] = formTime // 来料日期
          item['checkdate'] = checkdate // 检验日期
          item['createTime'] = createTime // 登记日期
      })
      console.log('data:',data)
      this.inspectionTable = data
      if(this.searchData.type !== ''){
        if(this.searchData.state !== ''){
          this.inspectionTable = data.filter((item)=>{
            return item.type===this.searchData.type && item.inspection_status === this.searchData.state
          })
        }else{
          this.inspectionTable = data.filter((item)=>{
            return item.type===this.searchData.type
          })
        }
      }else{
        if(this.searchData.state !== ''){
          this.inspectionTable = data.filter((item)=>{
            return item.inspection_status===this.searchData.state
          })
        }
      }
      this.total = this.inspectionTable.length
    },
    reset(){
      this.countSize = 1;
      this.pageSize = 8;
      this.searchData = { };
      this.selectInspectsList();
    },
    //被选中的信息 单选
    handleSelectionChange(val) {
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(val.pop())
      }
      this.tmp = val[0]
    },
    handleCommisionSelection(){
      this.commisionSelection = this.tmp
      this.commisionVisible = false
    },
    handleRawMaterialSelection(){
      this.infoForm = this.tmp
      this.rawmaterialVisible = false
    },
    async handleRadioChange(){
      if(this.type === 0){
        原材料报检
        
        this.rawmaterialVisible = true
        const res = await selectAll({type: this.type})
        var data = res.data
        data.forEach((item)=>{
          var checkdate = []
          checkdate.push(item['createTime'])
          checkdate.push(item['updateTime'])
          item['checkdate'] = checkdate // 检验日期
        })
          // this.infoForm = res.data
        // this.$router.push({ name: 'ReportForInspection' });
      }else if(this.type === 1){
        this.commisionVisible = true
        const res = await getCommisionList({pageNo:1,pageSize:10})
        // var data = res.data
        // data.forEach((item)=>{
        //   var checkdate = []
        //   checkdate.push(item['startTime'])
        //   checkdate.push(item['endTime'])
        //   item['checkdate_'] = item['startTime'] + '~' + item['endTime']
        //   item['checkdate'] = checkdate // 检验日期
        // })
        this.commisionTable = res.data
        // this.$router.push({ name: 'CommissionInspection' });
      }
    },
    // 新增检验
    async addInspection(){
      if(this.type === 0){
        await addInspect({endTime: this.infoForm.checkdate[1],
          formTime: this.infoForm.dateSurvey,
          mcode: this.infoForm.materialCoding,
          name: this.infoForm.materialName,
          num: this.infoForm.quantity,
          specifications: this.infoForm.specificationsModels,
          startTime: this.infoForm.checkdate[0] ,
          supplier: this.infoForm.supplierName,
          type: this.type,
          unit: this.infoForm.unit})
      }
      if(this.type === 1){
        console.log(this.commisionSelection)
        const res = await addInspect({endTime: this.commisionSelection.checkdate[1],
          formTime: this.commisionSelection.formTime,
          mcode: this.commisionSelection.mcode,
          name: this.commisionSelection.name,
          num: this.commisionSelection.num,
          specifications: this.commisionSelection.specifications,
          startTime: this.commisionSelection.checkdate[0] ,
          supplier: this.commisionSelection.supplier,
          type: this.type,
          unit: this.commisionSelection.unit})
          console.log('res',res)
      }
      if(this.type === 2){
        console.log(this.finishedTable)
        const res = await addInspect({ endTime: '2023-08-15',
          formTime: this.finishedTable.deliverydate,
          mcode: this.finishedTable.code,
          name: this.finishedTable.name,
          num: parseInt(this.finishedTable.amount),
          specifications: this.finishedTable.modelandspecification,
          startTime: '2023-08-14',
          supplier: this.finishedTable.supplier,
          type: this.type,
          unit: this.finishedTable.unit })
      }
      this.type = ''
      this.checkTypeVisible = false
      this.$message({
          message: '添加成功！',
          type: 'success'
        });
    },
      // 每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        // this.currentPage = 1
        this.pageSize = val
        this.selectInspectsList()
      },
      // 当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.currentPage = val
        this.selectInspectsList()
      },
      //确定跳转
      QUEding(){
        this.Standardframe = true
      }
    }
  }
  </script>
                  ::v-deep .el-radio__label {
                     color: #333 !important;

  <style lang="scss" scoped>
  .checkType{
    .check-box{
      .el-radio-group{
        display: flex;
        justify-content: space-around;
        .el-radio{
          // display: flex;
          // align-items: center;
          &.is-checked{
            background: #ecf5ff;
            border-color: #b3d8ff;
           ::v-deep  .el-radio__label{
              color: #333 !important;
                  }
               }

            }
          }
          height: auto;
          font-size: 22px !important;
          padding: 20px 40px !important;
          ::v-deep  .el-radio__label{
            font-size: 22px !important;
            padding-left: 0px !important;
          }
          ::v-deep  .el-radio__input{
          display: none !important;
        }
      }
   }
    }
  }
   .content-main{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .top-bar{
      margin: -25px -15px;
      background: #fff;
      display: flex;
      justify-content: space-between;
      padding: 5px 24px 0px 24px;
    }
    .input-form{
      width: 500px;
    }
    .retrieval{
    float: right;
    font-size: 14px;
    color: rgb(0, 120, 255);
    line-height: 40px;
   }
   .rightBtn {
    display: flex;
    justify-content: flex-end;
  }
               height: auto;
               font-size: 22px !important;
               padding: 40px 50px !important;

  .getDataBtn, .createBtn {
    margin-left: 10px; /* Optional: Add some space between the buttons */
  }
  .library-table{
        background-color: #fff;
        flex: 1;
        margin-left: -15px;
        margin-right: -15px;
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        .table-header{
          padding: 20px;
          display: flex;
          justify-content: space-between;
          .el-form-item{
            margin-bottom: 30px !important;
          }
        }
        .table-box{
            padding: 0px 20px;
            margin-top: 20px;
            flex: 1;
            background: #fff;
            // padding: 20px 20px 10px 20px;
            display: flex;
            flex-direction: column;
            .el-table {
              flex: 1;
              .tag{
                width: 80px;
              }
            }
            >div:nth-child(2){
              display: flex;
              justify-content: end;
              margin: 20px 0;
              margin-top: 30px;
            }
        }
      }
.checkTypeForm{
    margin-top: 30px;
    margin-left: 50px;
    .el-row{
        margin-bottom: 10px;
    }
}
.pagination{
  display: flex;
  margin-top: 20px;
  justify-content: end;
}
.dialog-footer{
  display: flex;
  margin-top: 20px;
  justify-content: end;
}
  </style>
               ::v-deep .el-radio__label {
                  font-size: 22px !important;
                  padding-left: 0px !important;
               }

               ::v-deep .el-radio__input {
                  display: none !important;
               }
            }
         }
      }
   }

   .content-main {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
   }

   .top-bar {
      margin: -25px -15px;
      background: #fff;
      display: flex;
      justify-content: space-between;
      padding: 20px 24px 0px 24px;
   }

   .input-form {
      width: 500px;
   }

   .retrieval {
      float: right;
      font-size: 14px;
      color: rgb(0, 120, 255);
      line-height: 40px;
   }

   .rightBtn {
      display: flex;
      justify-content: flex-end;
   }

   .getDataBtn,
   .createBtn {
      margin-left: 10px;
      /* Optional: Add some space between the buttons */
   }

   .library-table {
      background-color: #fff;
      flex: 1;
      margin-left: -15px;
      margin-right: -15px;
      margin-top: 50px;
      display: flex;
      flex-direction: column;

      .table-box {
         padding: 0px 20px;
         margin-top: 20px;
         flex: 1;
         background: #fff;
         // padding: 20px 20px 10px 20px;
         display: flex;
         flex-direction: column;

         .el-table {
            flex: 1;

            .tag {
               width: 80px;
            }
         }

         >div:nth-child(2) {
            display: flex;
            justify-content: end;
            margin: 20px 0;
            margin-top: 30px;
         }
      }
   }

   .checkTypeForm {
      margin-top: 30px;
      margin-left: 50px;

      .el-row {
         margin-bottom: 10px;
      }
   }

   .pagination {
      display: flex;
      justify-content: end;
   }

   .dialog-footer {
      display: flex;
      margin-top: 20px;
      justify-content: end;
   }
</style>