Fixiaobai
2023-09-08 8635253d498ea4fefd6ea465704569ff34fed3f8
src/views/experiment/nonConformingFeedback/index.vue
@@ -1,16 +1,187 @@
<template>
  <div>
      不符合品评审
  <div class="content-main">
    <div class="top-bar">
      <el-form ref="form" style="width: 100%;margin-top: 10px;" :inline="true">
          <el-form-item label="样式编号:">
            <el-input size="small" v-model="materialCode" placeholder="请输入样式编号"></el-input>
          </el-form-item>
          <el-form-item label="样式名称:">
            <el-input size="small" v-model="materialName" placeholder="请输入样式名称"></el-input>
          </el-form-item>
        <el-form-item label="申请单号:">
            <el-row><el-input size="small" v-model="inspectionCode" placeholder="请输入申请单号"></el-input></el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getData()">查询</el-button>
          <el-button type="primary" size="small" plain @click="resetData()">重置</el-button>
          <!-- <el-dropdown style="margin-left: 7px;">
            <span class="el-dropdown-link">
              高级搜索<i class="el-icon-arrow-down el-icon--right"></i>
            </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-item>
      </el-form>
      <el-form style="margin-top: 10px;">
        <el-button size="small" type="primary">批量提交</el-button>
      </el-form>
    </div>
    <div class="library-table">
      <div class="table-box">
        <el-table ref="tableData" :max-height="800" :cell-style="{ textAlign: 'left' }"
          :header-cell-style="{ border: '0px', background: '#f5f7fa', color: '#606266', boxShadow: 'inset 0 1px 0 #ebeef5', textAlign: 'left' }"
          :data="tableData" style="width: 100%">
          <el-table-column type="selection" label="" min-width="5%" />
          <el-table-column  label="样品编号" min-width="10%">
            <template slot-scope="scope">
              <a style="color: #3894d1;">{{ scope.row.materialCode }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="materialName" label="样品名称" min-width="10%" />
          <el-table-column label="申请单号" min-width="10%" >
            <template slot-scope="scope">
              <a style="color: #3894d1;">{{ scope.row.inspectionCode }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="登记日期" min-width="10%" />
          <el-table-column prop="testManager" label="检验负责人" min-width="10%" />
          <el-table-column prop="specifications" label="规格型号" min-width="10%" />
          <el-table-column prop="inspectionStatus" label="结论" min-width="10%">
            <template slot-scope="scope">
              <el-tag type="danger">不合格</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="8%">
            <template slot-scope="scope">
              <el-button type="text" size="small">操作</el-button>
              <el-button type="text" size="small">作废</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div>
          <el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { get, post } from '@/api/util/requestUtil';
import urlInfo from '../../../api/urlEnum/nonConformanceReview.js'
export default {
  data() {
    return {
      input: '',
      tableData: [],
      page: 1,
      total: 0,
      pageSize: 10,
      materialCode: null,
      materialName: null,
      inspectionCode: null
    }
  },
  created() {
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleCurrentChange() {
      this.getData();
    },
    handleSizeChange() {
    },
    exportData() {
    },
    // 重置按钮
    resetData() {
      this.page = 1
      this.pageSize = 10
      this.materialCode=null
      this.materialName=null
      this.inspectionCode=null
      this.getData()
    },
    async getData() {
      let param = {
        "currentPage": this.page,
        'pageNum': this.pageSize,
        "inspectionCode": this.inspectionCode,
        "materialCode": this.materialCode,
        "materialName": this.materialName
      }
      let res = await get(urlInfo.url.getNonConformanceReview, param)
      this.tableData = res.data.nonConformanceReviewList
      this.total = res.data.total
    }
  }
}
</script>
<style lang="scss" scoped>
.content-main {
  .el-form .el-form-item .el-form-item__content {
    width: 100% !important;
  }
  .top-bar {
    margin: -25px -15px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 5px 24px 0px 24px;
    .input-form {
      width: 800px;
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF !important;
    }
    .el-icon-arrow-down {
      font-size: 12px !important;
    }
  }
  .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: 20px;
      flex: 1;
      background: #fff;
      display: flex;
      flex-direction: column;
      >div:nth-child(2) {
        display: flex;
        justify-content: end;
        margin: 10px 0;
      }
    }
  }
}
</style>