8.15提交

yuyu

2023-08-15 4a8efc53405efe0d20312694d39fbd8184badb39

 src/views/laboratory/measure/index.vue

@@ -1,13 +1,319 @@
<template>
  <div>计量管理</div>
  <div>
      <div class="content-main">
          <div class="top-bar">
              <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item :label="this.radioValue === 0 ? '仪器设备编号:' : '编号:'" class="sermargin">
                <el-input
                  v-model="searchData.code"
                  class="input-form"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
              <el-form-item :label="this.radioValue === 0 ? '仪器设备名称:' : '设备名称'" class="sermargin">
                <el-input
                  v-model="searchData.name"
                  class="input-form"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
              <el-form-item :label="this.radioValue === 0 ? '计量单位:' : '计量单位：'" style="margin-right: 20px;">
                <el-input
                  v-model="searchData.measureunit"
                  class="input-form"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
              </el-form>
              <el-form>
                <el-form-item v-if="this.radioValue === 0" class="rightBtn">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="primary" plain @click="reset">重置</el-button>
                </el-form-item>
                <el-form-item v-if="this.radioValue === 1" class="rightBtn">
                  <el-button type="primary" icon="el-icon-plus">新增计划</el-button>
                </el-form-item>
              </el-form>
              </el-form>
          </div>
          <div class="library-table">
            <div class="table-header">
              <div class="search-bar">
                <el-radio-group v-model="radioValue" @change="radioclick">
                <el-radio-button v-for="item in options" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-radio-button>
              </el-radio-group>
              </div>
            </div>
            <div class="table-box">
              <el-table
                v-if="this.radioValue === 0"
                :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="measureLedgerTable"
                style="width: 100%"
              >
                <el-table-column
                  type="selection"
                  min-width="10%"
                />
                <el-table-column
                  prop="hello"
                  label="仪器设备编号"
                  min-width="10%"
                />
                <el-table-column
                  prop="entrust_coding"
                  label="仪器设备名称"
                  min-width="10%"
                />
                <el-table-column
                  prop="entrusted"
                  label="测量范围"
                  min-width="15%"
                />
                <el-table-column
                  prop="samples_number"
                  label="计量周期"
                  min-width="6%"
                />
                <el-table-column
                  prop="inspection_status"
                  label="计量结果"
                  min-width="6%">
                  <template slot-scope="scope">
                    <div v-if="scope.row.inspection_status === 1">
                      <span style="color: green;">正常</span>
                    </div>
                    <div v-else>
                      <span style="color: red;">失准</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="specifications_models"
                  label="计量日期"
                  min-width="12%"
                />
                <el-table-column
                  prop="dateSurvey"
                  label="计量有效期"
                  min-width="8%"
                />
                <el-table-column
                  prop="completionDeadline"
                  label="负责人"
                  min-width="6%"
                />
                <el-table-column
                  prop="contacts"
                  label="创建日期"
                  min-width="8%"
                />
                <el-table-column
                  prop="inspectionTime"
                  label="创建人"
                  min-width="8%"
                />
                <el-table-column
                  prop="inspectionTime"
                  label="计量编号"
                  min-width="8%"
                />
                <el-table-column
                  label="操作"
                  min-width="15%"
                >
                  <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>
              <el-table
                v-if="this.radioValue === 1"
                :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="measurePlanTable"
                style="width: 100%"
              >
                <el-table-column
                  type="selection"
                  min-width="10%"
                />
                <el-table-column
                  prop="hello"
                  label="计量单号"
                  min-width="10%"
                />
                <el-table-column
                  prop="entrust_coding"
                  label="设备编号"
                  min-width="10%"
                />
                <el-table-column
                  prop="entrusted"
                  label="设备名称"
                  min-width="15%"
                />
                <el-table-column
                  prop="samples_number"
                  label="计划日期"
                  min-width="6%"
                />
                <el-table-column
                  prop="inspection_status"
                  label="计量状态"
                  min-width="6%">
                  <template slot-scope="scope">
                    <div v-if="scope.row.inspection_status === 1">
                      <span style="color: green;">已完成</span>
                    </div>
                    <div v-else>
                      <span style="color: red;">未完成</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="specifications_models"
                  label="计量负责人"
                  min-width="12%"
                />
                <el-table-column
                  prop="dateSurvey"
                  label="计量单位"
                  min-width="8%"
                />
                <el-table-column
                  prop="completionDeadline"
                  label="创建人"
                  min-width="6%"
                />
                <el-table-column
                  prop="contacts"
                  label="创建日期"
                  min-width="8%"
                />
                <el-table-column
                  label="操作"
                  min-width="15%"
                >
                  <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
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import { getPlanPageList, getStandingPageList } from '@/api/laboratory/measure'
export default {

  data() {
    return {
      searchData:{
        code: '',
        name: '',
        measureunit: ''
      },
      radioValue: 0,
      options:[{
        value: 0,
        label: '计量台账'
      },{
        value: 1 ,
        label: '计量计划'
      }],
      measureLedgerTable: [],
      measurePlanTable: [],
      currentPage: 1,
      pageSize: 5,
      total: 20
    }
  },
  created(){
    this.getStandingPageList()
  },
  methods: {
    async getStandingPageList(){
      const res = await getStandingPageList({pageNo:this.currentPage , pageSize:this.pageSize })
      this.measureLedgerTable = res.data
      console.log(this.measureLedgerTable)
    }
    
  }
}
</script>

<style lang="scss" scoped>
<style scoped>

.top-bar{
    margin: -25px -15px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 5px 24px 0px 24px;
    .sermargin{
      margin-right: 60px;
    }
  }
.rightBtn{
    margin-right: 50px
}
.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: 0px;
          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>