委托检验和新增检验8.10提交

yuyu

2023-08-10 6c496684e92d7d0d90b50de55f77e3ee93bbabe1

 src/views/experiment/inspectionApplication/index.vue

@@ -1,5 +1,558 @@
<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 options"
                    :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 options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary">查询</el-button>
                <el-button type="primary" plain>重置</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="applicationnum"
                  label="申请单号"
                  min-width="100px"
                />
                <el-table-column
                  prop="checktype"
                  label="检验类型"
                  min-width="80px"
                />
                <el-table-column
                  prop="checkstate"
                  label="检验状态"
                  min-width="70px">
                  <template slot-scope="scope">
                    <div v-if="scope.row.checkstate === '1'">
                        <span style="color: green;">已检测</span>
                    </div>
                    <div v-else>
                        <span style="color: red;">未检测</span>
                    </div>
                    
                  </template>
                </el-table-column>
                <el-table-column
                  prop="deliverydate"
                  label="来料日期"
                  min-width="100px"
                />
                <el-table-column
                  prop="provider"
                  label="供应商名称"
                  min-width="150px"
                />
                <el-table-column
                  prop="rawcode"
                  label="原材料编码"
                  min-width="120px"
                />
                <el-table-column
                  prop="rawname"
                  label="原材料名称"
                  min-width="80px"
                />
                <el-table-column
                  prop="modelandspecification"
                  label="规格型号"
                  min-width="160px"
                />
                <el-table-column
                  prop="unit"
                  label="单位"
                  min-width="50px"
                />
                <el-table-column
                  prop="amount"
                  label="数量"
                  min-width="50px"
                />
                <el-table-column
                  prop="registrationdate"
                  label="登记日期"
                  min-width="80px"
                />
                <el-table-column
                  prop="registrator"
                  label="登记人"
                  min-width="80px"
                />
                <el-table-column
                  prop="qualified"
                  label="检验状态"
                  min-width="80px">
                  <template slot-scope="scope">
                    <div v-if="scope.row.qualified === null">
                        <span></span>
                    </div>
                    <div v-else>
                    <el-tag :type="scope.row.qualified === '0' ? 'success' : 'danger'"
                    disable-transitions
                  >{{ scope.row.qualified === '0' ? '合格' : '不合格' }}</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="applier"
                  label="申请人"
                  min-width="80px"
                />
                <el-table-column
                  prop="checker"
                  label="检验人"
                  min-width="80px"
                />
                <el-table-column
                  prop="checktime"
                  label="检验日期"
                  min-width="80px"
                />
                <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="[100, 200, 300, 400]"
                  :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">
                  <el-radio :label="0" border>原材料检验</el-radio>
                  <el-radio :label="1" border>半成品检验</el-radio>
                  <el-radio :label="2" border>成品检验</el-radio>
                </el-radio-group>
              </div>
              <el-form :model="infoForm" ref="infoForm" class="infoForm" 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.deliverydate" 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.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="infoForm.code" 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.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="infoForm.modelandspecification" 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.amount" 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>
              <span slot="footer" class="dialog-footer">
                <el-button @click="checkTypeVisible = false">取 消</el-button>
                <el-button type="primary" @click="goToForInspectionDetail">确 定</el-button>
              </span>
            </el-dialog>
          </div>
        </div>
      </template>
      <template v-else>
        <router-view />
      </template>
    </div>
</template>
  </template>
  
  <script>
  import { getInspectionList } from '@/api/rawMaterials/reportForInspection'
  export default {
    data() {
      return {
        showDetail: false,
        searchData: {
          applicationnumber: '',
          type: '',
          state: ''
        },
        inspectionTable: [{
            applicationnum: 'QC22-09155',
            checktype: '原材料检验',
            checkstate: '1',
            deliverydate: '2023-07-31',
            provider: '国网山东省电力有限公司',
            rawcode: '1010010090124',
            rawname: '铝包钢绞线',
            modelandspecification: 'JLHA1/G1A-185/30-27/7',
            unit: 'ml/kg',
            amount: '1999',
            registrationdate: '2022-09-23',
            registrator: '李小龙',
            qualified: '0',
            applier: '李小龙',
            checker: '李小龙',
            checktime: '2023-12-09'
        },{
            applicationnum: 'QC22-09155',
            checktype: '原材料检验',
            checkstate: '1',
            deliverydate: '2023-07-31',
            provider: '国网山东省电力有限公司',
            rawcode: '1010010090124',
            rawname: '铝包钢绞线',
            modelandspecification: 'JLHA1/G1A-185/30-27/7',
            unit: 'ml/kg',
            amount: '1999',
            registrationdate: '2022-09-23',
            registrator: '李小龙',
            qualified: '0',
            applier: '李小龙',
            checker: '李小龙',
            checktime: '2023-12-09'
        },{
            applicationnum: 'QC22-09155',
            checktype: '原材料检验',
            checkstate: '0',
            deliverydate: '2023-07-31',
            provider: '国网山东省电力有限公司',
            rawcode: '1010010090124',
            rawname: '铝包钢绞线',
            modelandspecification: 'JLHA1/G1A-185/30-27/7',
            unit: 'ml/kg',
            amount: '1999',
            registrationdate: '2022-09-23',
            registrator: '李小龙',
            qualified: null,
            applier: '李小龙',
            checker: '李小龙',
            checktime: '2023-12-09'
        },{
            applicationnum: 'QC22-09155',
            checktype: '原材料检验',
            checkstate: '1',
            deliverydate: '2023-07-31',
            provider: '国网山东省电力有限公司',
            rawcode: '1010010090124',
            rawname: '铝包钢绞线',
            modelandspecification: 'JLHA1/G1A-185/30-27/7',
            unit: 'ml/kg',
            amount: '1999',
            registrationdate: '2022-09-23',
            registrator: '李小龙',
            qualified: '1',
            applier: '李小龙',
            checker: '李小龙',
            checktime: '2023-12-09'
        }],
        infoForm:{
          deliverydate: '',
          provider: '',
          code: '',
          name: '',
          modelandspecification: '',
          unit: '',
          amount: '',
          checkdate: ''
        },
        options:[{
          value: '0',
          label: '选项1'
        },{
          value:'1',
          label: '选项2'
        }],
        currentPage: 1,
        total: 20, // 总条数
        pageSize: 10, // 每页的数据条数
        radioValue: '全部',
        checkTypeVisible: false,
        type: 0
      }
    },
    watch: {
      $route: {
        handler(val, oldval) {
          console.log(val)// 新路由信息
          console.log(oldval)// 老路由信息
        },
        // 深度观察监听
        deep: true
      }
    },
    // beforeRouteEnter(to, from, next) {
    //   console.log(to, from)
    //   next()
    //   // 在渲染该组件的对应路由被 confirm 前调用
    //   // 不！能！获取组件实例 `this`
    //   // 因为当钩子执行前，组件实例还没被创建
    // },
    // beforeRouteUpdate(to, from, next) {
    //   console.log(to, from)
    //   if (to.name === 'ForInspectionDetail') this.showDetail = true
    //   this.$nextTick(() => {
    //     console.log(1)
    //     this.showDetail = true
    //   })
    //   next()
    //   // 在当前路由改变，但是该组件被复用时调用
    //   // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    //   // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    //   // 可以访问组件实例 `this`
    // },
    created() {
      this.getInspectionTableData()
    },
    updated() {
      if (this.$route.name === 'ForInspectionDetail') this.showDetail = true
    },
    methods: {
      async getInspectionTableData() {
        const res = await getInspectionList({ pageSize: this.currentPage, countSize: this.pageSize })
        // this.inspectionTable = data
        console.log(res)
      },
      goToForInspectionDetail() {
        this.$router.push('/rawMaterials/reportForInspection/forInspectionDetail')
      },
      handleClick(row) {
        console.log(row)
      },
      // 每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.currentPage = 1
        this.pageSize = val
      },
      // 当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.currentPage = val
      }
    }
  }
  </script>
  
  <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;
  }
  
  .getDataBtn, .createBtn {
    margin-left: 10px; /* Optional: Add some space between the buttons */
  }
  .library-table{
        background-color: #fff;
        flex: 1;
        max-width: 100%;
        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;
            }
            >div:nth-child(2){
              display: flex;
              justify-content: end;
              margin: 20px 0;
              margin-top: 30px;
            }
        }
      }
.infoForm{
    margin-top: 30px;
    margin-left: 50px;
    .el-row{
        margin-bottom: 10px;
    }
}
  </style>