检验的第一次提交

hailin

2023-07-24 8a06fd26565b24603aa265db6715b5e246b831bd

 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;