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

yuyu

2023-08-10 6c496684e92d7d0d90b50de55f77e3ee93bbabe1

 src/views/rawMaterials/reportForInspection/index.vue

@@ -1,13 +1,351 @@
<template>
  <div>home</div>
  <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="type"
                label="检验类型"
                min-width="200"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.type===0">原材料检验</span>
                  <span v-else-if="scope.row.type===1">半成品检验</span>
                  <span v-else-if="scope.row.type===2">成品检验</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                min-width="200"
              />
              <el-table-column
                prop="userName"
                label="申请人"
                min-width="200"
              />
              <el-table-column
                prop="inspectUserId"
                label="检验人"
                min-width="200"
              />
              <el-table-column
                prop="inspectionStatus"
                label="检验状态"
                min-width="200"
              />
              <el-table-column
                prop="qualifiedState"
                label="合格状态"
                min-width="200"
              />
              <el-table-column
                prop="inspectStartTime"
                label="检验开始时间"
                min-width="200"
              />
              <el-table-column
                prop="inspectEndTime"
                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="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
        <div class="checkType">
          <el-dialog
            title="新增检验单"
            :visible.sync="checkTypeVisible"
            width="40%"
          >
            <div class="check-box">
              <el-radio-group v-model="addInspectionType">
                <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>

<script>
import { getInspectionList, addInspection } from '@/api/rawMaterials/reportForInspection'
export default {

  data() {
    return {
      showDetail: false,
      searchData: {
        keyword: ''
      },
      inspectionTable: [{
        'id': '1681215775833042945',
        'type': 0,
        'inspectionStatus': 0,
        'qualifiedState': null,
        'state': 1,
        'createTime': '2023-07-18 16:14:11',
        'updateTime': null,
        'version': null,
        'userName': '测试人员',
        'inspectUserId': null,
        'inspectStartTime': null,
        'inspectEndTime': null
      }],
      currentPage: 1,
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数
      radioValue: '全部',
      checkTypeVisible: false,
      addInspectionType: 0
    }
  },
  watch: {
    $route: {
      handler(val, oldval) {
        console.log(val)// 新路由信息
        console.log(oldval)// 老路由信息
      },
      // 深度观察监听
      deep: true
    }
  },
  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)
      this.inspectionTable = res.data
    },
    async goToForInspectionDetail() {
      try {
        //
        const form = new FormData()
        form.append('type', this.addInspectionType)
        let { data: inspectionDetail } = await addInspection(form)
        // console.log(res)
        inspectionDetail = JSON.stringify(inspectionDetail)
        this.$message.success('添加成功')
        this.$router.push({ path: '/rawMaterials/reportForInspection/forInspectionDetail', query: { inspectionDetail }})
      } catch (error) {
        this.$message.error('添加失败')
      }
    },
    // 查看对应申请单详情
    handleClick(row) {
      const inspectionDetail = JSON.stringify(row)
      this.$router.push({ path: '/rawMaterials/reportForInspection/forInspectionDetail', query: { inspectionDetail }})
    },
    // 每页条数改变时触发 选择一页显示多少行
    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;
    min-height: calc(100vh - 88px);
    padding: 15px;
  }
  .top-bar{
    margin: -25px;
    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: 0px;
      margin-right: 0px;
      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;
            display: flex;
            flex-direction: column;
            ::v-deep .el-table__body-wrapper{
              flex: 1;
            }
          }
          >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }
</style>