hailin
2023-07-24 8a06fd26565b24603aa265db6715b5e246b831bd
src/views/rawMaterials/reportForInspection/index.vue
@@ -1,7 +1,9 @@
<template>
  <div>
    <template v-if="!showDetail">
  <div class="content-main">
    <div class="top-bar">
      <el-form ref="form" inline="true" :model="searchData">
          <el-form ref="form" :inline="true" :model="searchData">
        <el-form-item>
          <el-input
            v-model="searchData.keyword"
@@ -33,7 +35,7 @@
          <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-button type="primary" icon="el-icon-plus" @click="checkTypeVisible = true">新增检验单</el-button>
        </el-form-item>
      </el-form>
    </div>
@@ -100,7 +102,7 @@
          <el-table-column
            label="操作"
            min-width="200"
            :fixed="true"
                fixed="right"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
@@ -122,6 +124,30 @@
        </div>
      </div>
    </div>
        <div class="checkType">
          <el-dialog
            title="新增检验单"
            :visible.sync="checkTypeVisible"
            width="40%"
          >
            <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>
    </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,6 +233,36 @@
</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%;