导航栏，报检管理

yuyu

2023-08-04 c13670bb28b8e0c2b68974aa446cd6e98691ef39

导航栏，报检管理

 src/components/Breadcrumb/index.vue

@@ -69,7 +69,8 @@
  font-size: 14px;
  padding: 12px 24px;
  height: 38px;
  width: 100%;
  // width: 100%;
  margin: 0px 9px;
  background: #fff;
  // margin-left: px;
  .no-redirect {

 src/router/index.js

@@ -74,81 +74,162 @@
      }
    ]
  },
  {
    path: '/rawMaterials',
    component: Layout,
    redirect: '/rawMaterials/reportForInspection',
    name: 'rawMaterials',
    meta: { title: '检验', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'reportForInspection',
        name: 'ReportForInspection',
        component: () => import('@/views/rawMaterials/reportForInspection/index'),
        meta: { title: '原材料报检', icon: 'table' },
        children: [
          // {
          //   path: 'index',
          //   name: 'ReportForInspectionIndex',
          //   // hidden: true,
  //   path: '/rawMaterials',
  //   component: Layout,
  //   redirect: '/rawMaterials/reportForInspection',
  //   name: 'rawMaterials',
  //   meta: { title: '检验', icon: 'el-icon-s-help' },
  //   children: [
  //     {
  //       path: 'reportForInspection',
  //       name: 'ReportForInspection',
          //   component: () => import('@/views/rawMaterials/reportForInspection/index'),
          //   meta: { title: '原材料报检', icon: 'table' }
  //       meta: { title: '原材料报检', icon: 'table' },
  //       children: [
  //         // {
  //         //   path: 'index',
  //         //   name: 'ReportForInspectionIndex',
  //         //   // hidden: true,
  //         //   component: () => import('@/views/rawMaterials/reportForInspection/index'),
  //         //   meta: { title: '原材料报检', icon: 'table' }
  //         // },
  //         {
  //           path: 'forInspectionDetail',
  //           name: 'ForInspectionDetail',
  //           hidden: true,
  //           component: () => import('@/views/rawMaterials/reportForInspection/forInspectionDetail'),
  //           meta: { title: '新增检验单详情', icon: 'table' }
  //         }
  //       ]
  //     },
  //     {
  //       path: 'print',
  //       name: 'Print',
  //       component: () => import('@/views/rawMaterials/print/index'),
  //       meta: { title: '条码打印', icon: 'tree' }
  //     },
  //     {
  //       path: 'planAssignments',
  //       name: 'PlanAssignments',
  //       component: () => import('@/views/rawMaterials/planAssignments/index'),
  //       meta: { title: '检验计划分配', icon: 'tree' }
  //     },
  //     {
  //       path: 'rawMaterialInspection',
  //       name: 'RawMaterialInspection',
  //       component: () => import('@/views/rawMaterials/rawMaterialInspection/index'),
  //       meta: { title: '原材料检验', icon: 'tree' }
  //     },
  //     {
  //       path: 'checkTheReport',
  //       name: 'CheckTheReport',
  //       component: () => import('@/views/rawMaterials/checkTheReport/index'),
  //       meta: { title: '检验报告', icon: 'tree' }
  //     },
  //     {
  //       path: 'reportAuditing',
  //       name: 'ReportAuditing',
  //       component: () => import('@/views/rawMaterials/reportAuditing/index'),
  //       meta: { title: '报告审核', icon: 'tree' }
  //     },
  //     {
  //       path: 'nonConformanceReview',
  //       name: 'NonConformanceReview',
  //       component: () => import('@/views/rawMaterials/nonConformanceReview/index'),
  //       meta: { title: '不合格反馈', icon: 'tree' }
  //     },
  //     {
  //       path: 'nonConformingFeedback',
  //       name: 'NonConformingFeedback',
  //       component: () => import('@/views/rawMaterials/nonConformingFeedback/index'),
  //       meta: { title: '不合格评审', icon: 'tree' }
  //     },
  //     {
  //       path: 'passRateStatistics',
  //       name: 'PassRateStatistics',
  //       component: () => import('@/views/rawMaterials/passRateStatistics/index'),
  //       meta: { title: '合格率统计', icon: 'tree' }
  //     }
  //   ]
          // },
          {
            path: 'forInspectionDetail',
            name: 'ForInspectionDetail',
    path: '/inspectionManagement',
    component: Layout,
    redirect: '/inspectionManagement/commissionInspection',
    name: 'InspectionManagement',
    meta: { title: '报检管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'commissionInspection',
        name: 'CommissionInspection',
        component: () => import('@/views/inspectionManagement/commissionInspection/index'),
        meta: { title: '委托检验', icon: 'table' },
        children: [
          {
            path: 'addCommision',
            name: 'AddCommision',
            hidden: true,
            component: () => import('@/views/rawMaterials/reportForInspection/forInspectionDetail'),
            meta: { title: '新增检验单详情', icon: 'table' }
            component: () => import('@/views/inspectionManagement/commissionInspection/addCommision'),
            meta: { title: '检测信息', icon: 'table' }
          }
        ]
      },
      {
        path: 'print',
        name: 'Print',
        component: () => import('@/views/rawMaterials/print/index'),
        meta: { title: '条码打印', icon: 'tree' }
        path: 'reportForInspection',
        name: 'ReportForInspection',
        component: () => import('@/views/inspectionManagement/reportForInspection/index'),
        meta: { title: '原材料报检', icon: 'tree' }
      }
    ]
  },
  {
    path: '/experiment',
    component: Layout,
    redirect: '/experiment/inspectionApplication',
    name: 'Experiment',
    meta: { title: '试验管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'inspectionApplication',
        name: 'InspectionApplication',
        component: () => import('@/views/experiment/inspectionApplication/index'),
        meta: { title: '检验申请', icon: 'tree' }
      },
      {
        path: 'planAssignments',
        name: 'PlanAssignments',
        component: () => import('@/views/rawMaterials/planAssignments/index'),
        component: () => import('@/views/experiment/planAssignments/index'),
        meta: { title: '检验计划分配', icon: 'tree' }
      },
      {
        path: 'rawMaterialInspection',
        name: 'RawMaterialInspection',
        component: () => import('@/views/rawMaterials/rawMaterialInspection/index'),
        meta: { title: '原材料检验', icon: 'tree' }
      },
      {
        path: 'checkTheReport',
        name: 'CheckTheReport',
        component: () => import('@/views/rawMaterials/checkTheReport/index'),
        component: () => import('@/views/experiment/checkTheReport/index'),
        meta: { title: '检验报告', icon: 'tree' }
      },
      {
        path: 'reportAuditing',
        name: 'ReportAuditing',
        component: () => import('@/views/rawMaterials/reportAuditing/index'),
        component: () => import('@/views/experiment/reportAuditing/index'),
        meta: { title: '报告审核', icon: 'tree' }
      },
      {
        path: 'nonConformanceReview',
        name: 'NonConformanceReview',
        component: () => import('@/views/rawMaterials/nonConformanceReview/index'),
        meta: { title: '不合格反馈', icon: 'tree' }
        component: () => import('@/views/experiment/nonConformanceReview/index'),
        meta: { title: '不合格品反馈', icon: 'tree' }
      },
      {
        path: 'nonConformingFeedback',
        name: 'NonConformingFeedback',
        component: () => import('@/views/rawMaterials/nonConformingFeedback/index'),
        meta: { title: '不合格评审', icon: 'tree' }
        component: () => import('@/views/experiment/nonConformingFeedback/index'),
        meta: { title: '不合格品评审', icon: 'tree' }
      },
      {
        path: 'passRateStatistics',
        name: 'PassRateStatistics',
        component: () => import('@/views/rawMaterials/passRateStatistics/index'),
        component: () => import('@/views/experiment/passRateStatistics/index'),
        meta: { title: '合格率统计', icon: 'tree' }
      }
    ]
@@ -250,6 +331,39 @@
    ]
  },
  {
    path: '/CNAS',
    component: Layout,
    redirect: '/CNAS/reviewAnnualPlan',
    name: 'CNAS',
    meta: { title: 'CNAS管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'reviewAnnualPlan',
        name: 'ReviewAnnualPlan',
        component: () => import('@/views/CNAS/reviewAnnualPlan/index'),
        meta: { title: '审核年度计划', icon: 'table' }
      },
      {
        path: 'nonConformanceManage',
        name: 'NonConformanceManage',
        component: () => import('@/views/CNAS/nonConformanceManage/index'),
        meta: { title: '不符合项管理', icon: 'tree' }
      },
      {
        path: 'nonConformanceStatistics',
        name: 'NonConformanceStatistics',
        component: () => import('@/views/CNAS/nonConformanceStatistics/index'),
        meta: { title: '不符合项统计', icon: 'tree' }
      },
      {
        path: 'satisfactionSurveys',
        name: 'SatisfactionSurveys',
        component: () => import('@/views/CNAS/satisfactionSurveys/index'),
        meta: { title: '满意度调查', icon: 'tree' }
      }
    ]
  },
  {
    path: '/chart',
    component: Layout,
    redirect: '/chart/center',

 src/views/CNAS/nonConformanceManage/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,5 @@
<template>
    <div>
        ä¸ç¬¦åˆé¡¹ç®¡ç†
    </div>
</template>

 src/views/CNAS/nonConformanceStatistics/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,3 @@
<template>
    <div>不符合项统计</div>
</template>

 src/views/CNAS/reviewAnnualPlan/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,5 @@
<template>
    <div>
        å®¡æ ¸å¹´åº¦è®¡åˆ’
    </div>
</template>

 src/views/CNAS/satisfactionSurveys/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,5 @@
<template>
    <div>
        æ»¡æ„åº¦è°ƒæŸ¥
    </div>
</template>

 src/views/experiment/checkTheReport/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>检测报告</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/experiment/inspectionApplication/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,5 @@
<template>
    <div>
        æ£€éªŒç”³è¯·
    </div>
</template>

 src/views/experiment/nonConformanceReview/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>不合格评审</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/experiment/nonConformingFeedback/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>不合格反馈</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/experiment/passRateStatistics/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>合格率统计</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/experiment/planAssignments/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>检验计划分配</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/experiment/reportAuditing/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>报告审核</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/inspectionManagement/commissionInspection/addCommision.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,254 @@
<template>
  <div class="content-main">
    <div class="firstBox">
      <span>检测信息</span>
      <div tableBox>
        <el-button type="primary" size="small" style="background-color: rgb(1, 102, 226);">添加样品</el-button>
        <el-input
          v-model="searchData"
          class="input-form"
          placeholder="扫描二维码录入样品..."
          prefix-icon="el-icon-search"
          style="width: 200px;"
        >
        </el-input>
        <el-button type="primary" size="small" style="background-color: rgb(1, 102, 226);">重置</el-button>
        <el-table
                ref="commisionTable"
                :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"
                style="width: 100%"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  min-width="10%"
                />
                <el-table-column
                  prop="commisioncode"
                  label="委托编号"
                  min-width="8%"
                />
                <el-table-column
                  prop="department"
                  label="委托单位"
                  min-width="10%"
                />
                <el-table-column
                  prop="samplecode"
                  label="样品编号"
                  min-width="8%"
                />
                <el-table-column
                  prop="samplename"
                  label="样品名称"
                  min-width="8%"
                />
                <el-table-column
                  prop="modelandspecification"
                  label="规格型号"
                  min-width="10%"
                />
                <el-table-column
                  prop="arrivetime"
                  label="送达时间"
                  min-width="8%"
                />
                <el-table-column
                  prop="deadline"
                  label="完成期限"
                  min-width="8%"
                />
                <el-table-column
                  prop="person"
                  label="委托编制人"
                  min-width="8%"
                />
                <el-table-column
                  prop="checkdate"
                  label="检验日期"
                  min-width="8%"
                />
                <el-table-column
                  prop="state"
                  label="状态"
                  min-width="8%"
                />
                <el-table-column
                  label="操作"
                  min-width="8%"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleClick(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- åˆ†é¡µå™¨ -->
              <div>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
                </el-pagination>
              </div>
      </div>
      <div class="secondBox">
        <el-row class="header">
                    <el-col :span="12">基本信息</el-col>
                    <el-col :span="12" style="text-align: right;">
                        <!-- ç‚¹å‡»è¿”回，当前页面值为false -->
                    <el-button type="primary" size="mini" style="background-color: rgb(1, 102, 226); ">打印委托单</el-button>
                    </el-col>
                </el-row>
                <el-form :model="infoForm" ref="infoForm" class="infoForm" label-position="left" label-width="100px" size="mini" >
                    <div class="formwrapper">
                        <el-row :gutter="50">
                        <el-col :span="12">
                        <el-form-item label="委托编号：">
                            <el-input style="width: 100px;" v-model="infoForm.commisioncode" placeholder="请输入订单号" readonly autocomplete="off" />  
                        </el-form-item>
                        </el-col>
                        <el-col :span="12">
                        <el-form-item label="委托单位：">
                            <el-select style="width: 180px;" v-model="infoForm.department" size="small" placeholder="请选择产品名称">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                        <el-col :span="12">
                        <el-form-item label="联系人：">
                            <el-select style="width: 180px;" v-model="infoForm.contacter" size="small" placeholder="请选择产品名称">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                        <el-col :span="12">
                        <el-form-item label="联系电话：">
                            <el-select style="width: 180px;" v-model="infoForm.tel" size="small" placeholder="请选择产品名称">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="450">
                        <el-col :span="5">
                        <el-form-item label="联系地址：" >
                            <el-select style="width: 180px;" v-model="infoForm.address" size="small" placeholder="请选择产品名称">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="完成期限：">
                            <el-date-picker
                              v-model="infoForm.deadline"
                              type="date"
                              placeholder="选择日期"
                              style="width: 180px;">
                            </el-date-picker>
                          </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="送样时间：">
                            <el-date-picker
                              v-model="infoForm.time"
                              type="date"
                              placeholder="选择日期"
                              style="width: 180px;">
                            </el-date-picker>
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="送样方式：">
                          <el-select style="width: 180px;" v-model="infoForm.way" size="small" placeholder="送样">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="450">
                        <el-col :span="5">
                        <el-form-item label="送样人：" >
                          <el-input style="width: 180px;" v-model="infoForm.sender" placeholder="请输入送样人" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="送样人电话：" >
                          <el-input style="width: 180px;" v-model="infoForm.sendertel" placeholder="请输入送样人电话" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="报告数：">
                            <el-input style="width: 180px;" v-model="infoForm.num" placeholder="请输入报告数" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="委托备注：">
                            <el-input style="width: 180px;" v-model="infoForm.other" placeholder="备注" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                    </el-row>
                    </div>
                </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchData: '',
      infoForm: [{
        commisioncode: '',
        department: '',
        contacter: '',
        tel: '',
        address: '',
        deadline: '',
        time: '',
        way: '',
        sender: '',
        sendertel: '',
        num: '',
        other: ''
      }]
    }
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val)
      this.radioSelected = val.number // é€‰ä¸­è¡Œçš„number
      this.multipleSelection = val // é€‰ä¸­çš„一行数据
    },
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
    },
    handleCurrentChange(pageNo) {
      this.pageParams.pageNo = pageNo
    },
    headerBg({ row, rowIndex }) {
      console.log('rowIndex', rowIndex)
      if (rowIndex === 0) {
        return 'headerBgClass'
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

 src/views/inspectionManagement/commissionInspection/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,284 @@
<template>
  <div>
    <div v-if="!showDetail">
      <div class="content-main">
          <div class="top-bar">
              <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item label="委托编号:" class="sermargin">
                <el-input
                  v-model="searchData.code"
                  class="input-form"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="样品名称:" class="sermargin">
                <el-input
                  v-model="searchData.name"
                  class="input-form"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="委托单位:" style="margin-right: 20px;">
                <el-select v-model="searchData.department" placeholder="全部">
                  <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>
                <el-button class="rightBtn" type="primary" @click="goToaddCommision">新增委托</el-button>
              </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-group>
              </div>
              <div class="generateInsp">
                <el-button type="primary" size="mini" icon="el-icon-document" style="background-color: rgb(1, 102, 226);">生成报检单</el-button>
              </div>
            </div>
            <div class="table-box">
              <el-table
                ref="commisionTable"
                :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"
                style="width: 100%"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  min-width="10%"
                />
                <el-table-column
                  prop="commisioncode"
                  label="委托编号"
                  min-width="8%"
                />
                <el-table-column
                  prop="department"
                  label="委托单位"
                  min-width="10%"
                />
                <el-table-column
                  prop="samplecode"
                  label="样品编号"
                  min-width="8%"
                />
                <el-table-column
                  prop="samplename"
                  label="样品名称"
                  min-width="8%"
                />
                <el-table-column
                  prop="modelandspecification"
                  label="规格型号"
                  min-width="10%"
                />
                <el-table-column
                  prop="arrivetime"
                  label="送达时间"
                  min-width="8%"
                />
                <el-table-column
                  prop="deadline"
                  label="完成期限"
                  min-width="8%"
                />
                <el-table-column
                  prop="person"
                  label="委托编制人"
                  min-width="8%"
                />
                <el-table-column
                  prop="checkdate"
                  label="检验日期"
                  min-width="8%"
                />
                <el-table-column
                  prop="state"
                  label="状态"
                  min-width="8%"
                />
                <el-table-column
                  label="操作"
                  min-width="8%"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleClick(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- åˆ†é¡µå™¨ -->
              <div>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
                </el-pagination>
              </div>
            </div>
          </div>
      </div>
  </div>
    <div v-else>
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: [],
      searchData: {
        code: '',
        name: '',
        department: ''
      },
      options: [{
        value: '1',
        label: '部门1'
      }, {
        value: '2',
        label: '部门2'
      }, {
        value: '3',
        label: '部门3'
      }],
      radioValue: '',
      commisionTable: [{
        commisioncode: 'GW31478631',
        department: '国网山东省电力有限公司',
        samplecode: 'BP214274',
        samplename: '绝缘杆',
        modelandspecification: 'JLHA/G1A-185/30-26/7',
        arrivetime: '2023-08-01',
        deadline: '2023-08-05',
        person: '黄小明',
        checkdate: '2023-08-02',
        state: '已检测'
      }, {
        commisioncode: 'GW31478631',
        department: '国网山东省电力有限公司',
        samplecode: 'BP214274',
        samplename: '绝缘杆',
        modelandspecification: 'JLHA/G1A-185/30-26/7',
        arrivetime: '2023-08-01',
        deadline: '2023-08-05',
        person: '黄小明',
        checkdate: '2023-08-02',
        state: '已检测'
      }, {
        commisioncode: 'GW31478631',
        department: '国网山东省电力有限公司',
        samplecode: 'BP214274',
        samplename: '绝缘杆',
        modelandspecification: 'JLHA/G1A-185/30-26/7',
        arrivetime: '2023-08-01',
        deadline: '2023-08-05',
        person: '黄小zhi',
        checkdate: '2023-08-02',
        state: '已检测'
      }],
      currentPage: 0,
      showDetail: false
    }
  },
  updated() {
    if (this.$router.currentRoute.name === 'AddCommision') {
      // console.log(this.$router.currentRoute.name)
      this.showDetail = true
    }
  },
  methods: {
    // æ¯é¡µæ¡æ•°æ”¹å˜æ—¶è§¦å‘ é€‰æ‹©ä¸€é¡µæ˜¾ç¤ºå¤šå°‘è¡Œ
    handleSizeChange(val) {
      console.log(`每页 ${val} æ¡`)
      this.currentPage = 1
      this.pageSize = val
    },
    // å½“前页改变时触发 è·³è½¬å…¶ä»–页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    },
    goToaddCommision() {
      this.$router.push('/inspectionManagement/commissionInspection/addCommision')
      this.showDetail = true
    }
  }
}
</script>

<style scoped>

.top-bar{
    margin: -25px -15px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 5px 24px 0px 24px;
    .sermargin{
      margin-right: 60px;
    }
  }
.rightBtn{
    background-color: rgb(1, 102, 226);
}
.library-table{
      background-color: #fff;
      flex: 1;
      margin: 0px -15px;
      margin-top: 40px;
      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: 0px;
          flex: 1;
          background: #fff;
          /* padding: 20px 20px 10px 20px; */
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
          }
          >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }

</style>

 src/views/inspectionManagement/reportForInspection/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,302 @@
<template>
    <div class="content-main">
        <div class="top-bar">
            <el-form ref="form" :inline="true" :model="searchData">
            <el-form-item label="材料编码:" class="sermargin">
              <el-input
                v-model="searchData.code"
                class="input-form"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="材料名称:" class="sermargin">
              <el-input
                v-model="searchData.name"
                class="input-form"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="状态:" class="sermargin">
              <el-select v-model="searchData.state" placeholder="全部">
                <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-input
                v-model="searchData.date"
                class="input-form"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button type="primary" plain>重置</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-group>
            </div>
            <div class="generateInsp">
              <el-button type="primary" size="mini" icon="el-icon-document" style="background-color: rgb(1, 102, 226);">生成报检单</el-button>
            </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"
                label=""
                min-width="10%"
              /> 
              <el-table-column
                type="index"
                label="序号"
                min-width="8%"
              />
              <el-table-column
                prop="date"
                label="来料日期"
                min-width="8%"
              />
              <el-table-column
                prop="providerName"
                label="供应商名称"
                min-width="12%"
              />
              <el-table-column
                prop="code"
                label="材料编码"
                min-width="8%"
              />
              <el-table-column
                prop="name"
                label="材料名称"
                min-width="8%"
              />
              <el-table-column
                prop="modelandspecification"
                label="规格型号"
                min-width="12%"
              />
              <el-table-column
                prop="unit"
                label="单位"
                min-width="5%"
              />
              <el-table-column
                prop="amount"
                label="数量"
                min-width="5%"
              />
              <el-table-column
                prop="commisiondate"
                label="报检日期"
                min-width="8%"
              />
              <el-table-column
                prop="person"
                label="检验人"
                min-width="8%"
              />
              <el-table-column
                prop="checkdate"
                label="检验日期"
                min-width="8%"
              />
              <el-table-column
                prop="state"
                label="状态"
                min-width="8%"
              >
              <template slot-scope="scope">
                <span :style="{ color: scope.row.state === '已检测' ? 'green' : 'red' }">
                  {{ scope.row.state }}
                </span>
              </template>
              </el-table-column>
            </el-table>
            <!-- åˆ†é¡µå™¨ -->
            <div>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
              </el-pagination>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      form: [],
      searchData: {
        code: '',
        name: '',
        state: '',
        date: ''
      },
      options: [{
        value: '1',
        label: '部门1'
      }, {
        value: '2',
        label: '部门2'
      }, {
        value: '3',
        label: '部门3'
      }],
      radioValue: '',
      inspectionTable: [{
        date: '2023-07-28',
        providerName: '国网山东省电力有限公司',
        code: 'BP214274',
        name: '铝包钢绞线',
        modelandspecification: 'JLHA/G1A-185/30-26/7',
        unit: '吨',
        amount: '21',
        commisiondate: '2023-08-02',
        person: '黄小明',
        checkdate: '2023-12-09',
        state: '已检测'
      }, {
        date: '2023-07-28',
        providerName: '国网山东省电力有限公司',
        code: 'BP214274',
        name: '铝包钢绞线',
        modelandspecification: 'JLHA/G1A-185/30-26/7',
        unit: '吨',
        amount: '21',
        commisiondate: '2023-08-02',
        person: '黄小明',
        checkdate: '2023-12-09',
        state: '待检测'
      }, {
        date: '2023-07-28',
        providerName: '国网山东省电力有限公司',
        code: 'BP214274',
        name: '铝包钢绞线',
        modelandspecification: 'JLHA/G1A-185/30-26/7',
        unit: '吨',
        amount: '21',
        commisiondate: '2023-08-02',
        person: '黄小明',
        checkdate: '2023-12-09',
        state: '已检测'
      }, {
        date: '2023-07-28',
        providerName: '国网山东省电力有限公司',
        code: 'BP214274',
        name: '铝包钢绞线',
        modelandspecification: 'JLHA/G1A-185/30-26/7',
        unit: '吨',
        amount: '21',
        commisiondate: '2023-08-02',
        person: '黄小明',
        checkdate: '2023-12-09',
        state: '待检测'
      }],
      currentPage: 0
    }
  },
  methods: {
    // æ¯é¡µæ¡æ•°æ”¹å˜æ—¶è§¦å‘ é€‰æ‹©ä¸€é¡µæ˜¾ç¤ºå¤šå°‘è¡Œ
    handleSizeChange(val) {
      console.log(`每页 ${val} æ¡`)
      this.currentPage = 1
      this.pageSize = val
    },
    // å½“前页改变时触发 è·³è½¬å…¶ä»–页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    }
  }
}
</script>

<style scoped>

.top-bar{
    margin: -25px -15px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 5px 24px 0px 24px;
    .sermargin{
        margin-right: 60px;
    }
}
.rightBtn{
    background-color: rgb(1, 102, 226);
}
.library-table{
      background-color: #fff;
      flex: 1;
      margin: 0px -15px;
      margin-top: 40px;
      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: 0px;
          flex: 1;
          background: #fff;
          /* padding: 20px 20px 10px 20px; */
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
          }
          >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }
.checked {
  color: green;
}

.unchecked {
  color: red;
}

</style>