提交我的信息和原材料报检页面

Goldennfish

2023-07-18 1aeff8b542a22d6c6a2efbac87704bca554afee8

 src/views/rawMaterials/reportForInspection/index.vue

@@ -1,13 +1,287 @@
<template>
  <div>home</div>
  <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">新增检验单</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="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>
  </div>
</template>

<script>
export default {

  data() {
    return {
      searchData: {
        keyword: ''
      },
      inspectionTable: [{
        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'
      },
      {
        applicationOrdernumber: 'QC22-09155',
        typeofInspection: '采购入库',
        objectofInspection: 'MI202207032-1',
        palceofObject: '---',
        name: '这是一条测试数据',
        date: '2022-09-23',
        registrant: '管理员',
        applicationTime: '111'
      }
      ],
      currentPage: 1,
      total: 20, // 总条数
      pageSize: 100, // 每页的数据条数
      radioValue: '全部'
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    }
  }
}
</script>

<style lang="scss" scoped>
  .content-main{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .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;
          }
          >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }
</style>