检验的第一次提交

hailin

2023-07-24 8a06fd26565b24603aa265db6715b5e246b831bd

检验的第一次提交

 src/permission.js

@@ -1,65 +1,65 @@
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'
// import router from './router'
// import store from './store'
// import { Message } from 'element-ui'
// import NProgress from 'nprogress' // progress bar
// import 'nprogress/nprogress.css' // progress bar style
// import { getToken } from '@/utils/auth' // get token from cookie
// import getPageTitle from '@/utils/get-page-title'

NProgress.configure({ showSpinner: false }) // NProgress Configuration
// NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['/login'] // no redirect whitelist
// const whiteList = ['/login'] // no redirect whitelist

router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()
// router.beforeEach(async(to, from, next) => {
//   // start progress bar
//   NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)
//   // set page title
//   document.title = getPageTitle(to.meta.title)

  // determine whether the user has logged in
  const hasToken = getToken()
//   // determine whether the user has logged in
//   const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasGetUserInfo = store.getters.name
      if (hasGetUserInfo) {
        next()
      } else {
        try {
          // get user info
          await store.dispatch('user/getInfo')
//   if (hasToken) {
//     if (to.path === '/login') {
//       // if is logged in, redirect to the home page
//       next({ path: '/' })
//       NProgress.done()
//     } else {
//       const hasGetUserInfo = store.getters.name
//       if (hasGetUserInfo) {
//         next()
//       } else {
//         try {
//           // get user info
//           await store.dispatch('user/getInfo')

          next()
        } catch (error) {
          // remove token and go to login page to re-login
          // é‡æ–°åˆ·æ–°token
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/
//           next()
//         } catch (error) {
//           // remove token and go to login page to re-login
//           // é‡æ–°åˆ·æ–°token
//           await store.dispatch('user/resetToken')
//           Message.error(error || 'Has Error')
//           next(`/login?redirect=${to.path}`)
//           NProgress.done()
//         }
//       }
//     }
//   } else {
//     /* has no token*/

    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})
//     if (whiteList.indexOf(to.path) !== -1) {
//       // in the free login whitelist, go directly
//       next()
//     } else {
//       // other pages that do not have permission to access are redirected to the login page.
//       next(`/login?redirect=${to.path}`)
//       NProgress.done()
//     }
//   }
// })

router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})
// router.afterEach(() => {
//   // finish progress bar
//   NProgress.done()
// })

 src/router/index.js

@@ -85,7 +85,23 @@
        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',

 src/views/rawMaterials/reportForInspection/father.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,15 @@
<template>
  <div class="forinspection-father-main">
    <router-view />
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

 src/views/rawMaterials/reportForInspection/forInspectionDetail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,314 @@
<template>
  <div class="forInspectionDetail-main">
    <div class="for-inspction-detail-header">
      <div class="header-left">报检编号：</div>
      <div class="header-right">
        <el-form class="rightBtn" :inline="true">
          <el-form-item class="createBtn">
            <el-button type="error" icon="el-icon-plus">作废申请</el-button>
          </el-form-item>
          <el-form-item class="getDataBtn">
            <el-button type="primary" icon="el-icon-download">提交申请</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="content-main">
      <div class="card-main">
        <div class="tips-main">
          <div class="tips">
            <span />
            <div>基本信息</div>
          </div>
          <!-- <div class="tips-btn">
              <span><i class="el-icon-edit" />操作：</span>
              <el-button type="text">编辑</el-button>
            </div> -->
        </div>
        <div class="message">
          <div class="message-item"><span><i class="el-icon-edit" />试验方法：</span></div>
          <div class="message-item">
            <span><i class="el-icon-edit" />项目分类：</span>
          </div>
          <div class="message-item">
            <span><i class="el-icon-edit" />更新人：</span></div>
          <div class="message-item">
            <span><i class="el-icon-edit" />更新时间：</span></div>
        </div>
      </div>
      <div class="card-main sample-list">
        <div class="tips-main">
          <div class="tips">
            <span />
            <div>样品相关</div>
          </div>
          <div class="tips-btn" :style="{marginBottom: '10px'}">
            <!-- <span><i class="el-icon-edit" />操作：</span> -->
            <el-button type="primary" icon="el-icon-download" @click="addSampleVisible = true">添加样品</el-button>
          </div>
        </div>
        <div class="table-box">
          <el-table
            ref="sampleTable"
            :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="sampleTable"
            style="width: 100%"
          >
            <el-table-column
              prop="applicationOrdernumber"
              label="申请单号"
              min-width="200"
            />
            <el-table-column
              prop="typeofInspection"
              label="检验类型"
              min-width="200"
            />
            <el-table-column
              prop="objectofInspection"
              label="检验对象"
              min-width="200"
            />
            <el-table-column
              prop="palceofObject"
              label="对象位置"
              min-width="200"
            />
            <el-table-column
              prop="name"
              label="对象名称"
              min-width="200"
            />
            <el-table-column
              prop="date"
              label="登记日期"
              min-width="200"
            />
            <el-table-column
              prop="registrant"
              label="登记人"
              min-width="200"
            />
            <el-table-column
              prop="applicationTime"
              label="申请时间"
              min-width="200"
            />
            <el-table-column
              label="操作"
              min-width="200"
              :fixed="true"
            >
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                <el-button type="text" size="small">作废</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- åˆ†é¡µå™¨ -->
          <div>
            <el-pagination
              :current-page="pageParams.pageNo"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </div>
        </div>

      </div>
    </div>
    <el-drawer
      title="新增样品"
      :visible.sync="addSampleVisible"
      :direction="direction"
      size="50%"
    >
      <div class="demo-drawer__content">
        <el-form :model="addSampleFrom">
          <el-form-item>
            <el-button>选择物料</el-button>
          </el-form-item>
          <el-row>
            <el-col>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sampleTable: [],
      pageParams: {
        pageNo: 1,
        pageSize: 1,
        total: 3
      },
      addSampleVisible: false,
      direction: 'rtl',
      addSampleFrom: {}
    }
  }
}
</script>

<style lang="scss" scoped>
.forInspectionDetail-main{
    min-height: calc(100vh - 88px);
    display: flex;
    flex-direction: column;
}
.for-inspction-detail-header{
    width: 100%;
    background: #fff;
    // height: 42px;
    display: flex;
    border-bottom: 1px solid #f0f2f5;
    padding: 8px 24px 12px 24px;
    justify-content: space-between;
    align-items: center;
    .header-left{
          font-size: 20px;
          color: #303133;
    }
    .header-right{
        .el-form-item{
            margin-bottom: 0px !important;
        }
         .rightBtn {
            display: flex;
            justify-content: flex-end;
        }
    }
}
.content-main{
    display: flex;
    flex: 1;
    flex-direction: column;
    .sample-list{
        flex: 1;
        display: flex;
        flex-direction: column;
        .table-box{
            padding: 20px;
            flex: 1;
            display: flex;
            flex-direction: column;
            .el-table{
                flex: 1;
                display: flex;
                flex-direction: column;
                ::v-deep .el-table__body-wrapper{
                    flex: 1 !important;
                }
            }
            >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
        }
    }
    .card-main{
        background: #fff;
        // padding: 10px 20px 10px 20px;
        margin: 0;
        margin-bottom: 12px;
        border-radius: 6px;
        overflow: hidden;
        .tips-main{
        // margin: ;
        padding: 10px 20px 0px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        // height: ;
        &:hover{
            background: #85bff810;
            .tips-btn{
            display: block;
            left: 0;
            opacity:1;
            }
        }
        .tips-btn{
            height: 100%;
            // display: none;
            position: relative;
            opacity:0;
            left: 100px;
            transition: all 0.3s ease-in-out;
        }
        .tips{
        height: 100%;
        display: flex;
        height: 24px;
        align-items: center;
        font-size: 16px;
        // margin-bottom: 12px;
        >span{
            display: inline-block;
            margin-right: 10px;
            width: 4px;
            height: 16px;
            background: #0077DB;
        }
        >div{
            height: 100%;
            line-height: 26px;
        }
        .el-button{
            padding: 0;
        }
        }
        }

        // åŸºæœ¬ä¿¡æ¯å’Œä¼ä¸šä¿¡æ¯çš„每一个信息项样式
        .message{
        padding: 0px 20px 10px 20px;

        display: flex;
        flex-wrap: wrap;
        border-top: 1px solid #F2F6FC;
        // border-top: 1px solid #F2F6FC;
        >div{
            flex: 50%;
            max-width: 50%;
            padding: 8px;
            color: #606266;
            align-items: center;
            // height: 65px;
            font-size: 12px;
            height: 52px;
            display: flex;
            align-items: center;
            >span{
            color: #303133;
            font-size: 16px;
            //
            >i{
                margin-right: 8px;
            }
            }
        }
        // >div:nth-child(5){
        //   flex: 60%;
        //   max-width: 60%;
        // }
        }
    }
}

.demo-drawer__content{
    padding: 20px;
}

</style>

 src/views/rawMaterials/reportForInspection/index.vue

@@ -1,127 +1,153 @@
<template>
  <div class="content-main">
    <div class="top-bar">
      <el-form ref="form" inline="true" :model="searchData">
        <el-form-item>
          <el-input
            v-model="searchData.keyword"
            class="input-form"
            placeholder="请输入申请单号/检验对象/对象位置/对象名称"
  <div>
    <template v-if="!showDetail">
      <div class="content-main">
        <div class="top-bar">
          <el-form ref="form" :inline="true" :model="searchData">
            <el-form-item>
              <el-input
                v-model="searchData.keyword"
                class="input-form"
                placeholder="请输入申请单号/检验对象/对象位置/对象名称"
              >
                <i slot="prefix" class="el-input__icon el-icon-search" />
              </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-dropdown>
              <span class="retrieval">
                é«˜çº§æ£€ç´¢<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form>
          <el-form class="rightBtn">
            <el-form-item class="getDataBtn">
              <el-button type="primary" icon="el-icon-download" plain>获取ERP数据</el-button>
            </el-form-item>
            <el-form-item class="createBtn">
              <el-button type="primary" icon="el-icon-plus" @click="checkTypeVisible = true">新增检验单</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
                prop="applicationOrdernumber"
                label="申请单号"
                min-width="200"
              />
              <el-table-column
                prop="typeofInspection"
                label="检验类型"
                min-width="200"
              />
              <el-table-column
                prop="objectofInspection"
                label="检验对象"
                min-width="200"
              />
              <el-table-column
                prop="palceofObject"
                label="对象位置"
                min-width="200"
              />
              <el-table-column
                prop="name"
                label="对象名称"
                min-width="200"
              />
              <el-table-column
                prop="date"
                label="登记日期"
                min-width="200"
              />
              <el-table-column
                prop="registrant"
                label="登记人"
                min-width="200"
              />
              <el-table-column
                prop="applicationTime"
                label="申请时间"
                min-width="200"
              />
              <el-table-column
                label="操作"
                min-width="200"
                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>
                </template>
              </el-table-column>
            </el-table>
            <!-- åˆ†é¡µå™¨ -->
            <div>
              <el-pagination
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="this.inspectionTable.length"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
        <div class="checkType">
          <el-dialog
            title="新增检验单"
            :visible.sync="checkTypeVisible"
            width="40%"
          >
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </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-dropdown>
          <span class="retrieval">
            é«˜çº§æ£€ç´¢<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form>
      <el-form class="rightBtn">
        <el-form-item class="getDataBtn">
          <el-button type="primary" icon="el-icon-download" plain>获取ERP数据</el-button>
        </el-form-item>
        <el-form-item class="createBtn">
          <el-button type="primary" icon="el-icon-plus">新增检验单</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 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>
            <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>
      <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
            prop="applicationOrdernumber"
            label="申请单号"
            min-width="200"
          />
          <el-table-column
            prop="typeofInspection"
            label="检验类型"
            min-width="200"
          />
          <el-table-column
            prop="objectofInspection"
            label="检验对象"
            min-width="200"
          />
          <el-table-column
            prop="palceofObject"
            label="对象位置"
            min-width="200"
          />
          <el-table-column
            prop="name"
            label="对象名称"
            min-width="200"
          />
          <el-table-column
            prop="date"
            label="登记日期"
            min-width="200"
          />
          <el-table-column
            prop="registrant"
            label="登记人"
            min-width="200"
          />
          <el-table-column
            prop="applicationTime"
            label="申请时间"
            min-width="200"
          />
          <el-table-column
            label="操作"
            min-width="200"
            :fixed="true"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
              <el-button type="text" size="small">作废</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- åˆ†é¡µå™¨ -->
        <div>
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.inspectionTable.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    </template>
    <template v-else>
      <router-view />
    </template>
  </div>
</template>

@@ -129,6 +155,7 @@
export default {
  data() {
    return {
      showDetail: false,
      searchData: {
        keyword: ''
      },
@@ -141,65 +168,52 @@
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      },
      {
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      },
      {
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      },
      {
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      },
      {
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      },
      {
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      }
      ],
      }],
      currentPage: 1,
      total: 20, // æ€»æ¡æ•°
      pageSize: 100, // æ¯é¡µçš„数据条数
      radioValue: '全部'
      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`
  // },
  updated() {
    if (this.$route.name === 'ForInspectionDetail') this.showDetail = true
  },
  methods: {
    goToForInspectionDetail() {
      this.$router.push('/rawMaterials/reportForInspection/forInspectionDetail')
    },
    handleClick(row) {
      console.log(row)
    },
@@ -219,7 +233,37 @@
</script>

<style lang="scss" scoped>
  .content-main{
.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;