8.16提交 原材料报检 角色管理

yuyu

2023-08-16 e8b239efa63361a8984810bf9b4047981b98050c

 src/views/laboratory/measure/index.vue

@@ -1,13 +1,398 @@
<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="equipment_code"
                  label="仪器设备编号"
                  min-width="10%"
                />
                <el-table-column
                  prop="equipment_name"
                  label="仪器设备名称"
                  min-width="10%"
                />
                <el-table-column
                  prop="measure_range"
                  label="测量范围"
                  min-width="15%"
                />
                <el-table-column
                  prop="measurecycle"
                  label="计量周期"
                  min-width="6%"
                />
                <el-table-column
                  prop="mesureresult"
                  label="计量结果"
                  min-width="6%">
                  <template slot-scope="scope">
                    <div v-if="scope.row.mesureresult === 1">
                      <span style="color: green;">正常</span>
                    </div>
                    <div v-else>
                      <span style="color: red;">失准</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="date"
                  label="计量日期"
                  min-width="12%"
                />
                <el-table-column
                  prop="term_validity"
                  label="计量有效期"
                  min-width="8%"
                />
                <el-table-column
                  prop="head"
                  label="负责人"
                  min-width="6%"
                />
                <el-table-column
                  prop="create_time"
                  label="创建日期"
                  min-width="8%"
                />
                <el-table-column
                  prop="create_person"
                  label="创建人"
                  min-width="8%"
                />
                <el-table-column
                  prop="measure_code"
                  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-show="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="measure_number"
                  label="计量单号"
                  min-width="10%"
                />
                <el-table-column
                  prop="equipment_code"
                  label="设备编号"
                  min-width="10%"
                />
                <el-table-column
                  prop="equipment_name"
                  label="设备名称"
                  min-width="8%"
                />
                <el-table-column
                  prop="scheduled_date"
                  label="计划日期"
                  min-width="15%"
                />
                <el-table-column
                  prop="measure_state"
                  label="计量状态"
                  min-width="6%">
                  <template slot-scope="scope">
                    <div v-if="scope.row.measure_state === 1">
                      <span style="color: green;">已完成</span>
                    </div>
                    <div v-else>
                      <span style="color: red;">未完成</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="head"
                  label="计量负责人"
                  min-width="12%"
                />
                <el-table-column
                  prop="department"
                  label="计量单位"
                  min-width="8%"
                />
                <el-table-column
                  prop="creater"
                  label="创建人"
                  min-width="6%"
                />
                <el-table-column
                  prop="create_date"
                  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 class="pagination">
                <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: [{
        equipment_code: 'JSTC-W1-00001',  // 仪器设备编号
        equipment_name: '数字电桥',   // 仪器设备名称
        measure_range: '---',  // 测量范围
        measurecycle: '12月',   // 计量周期
        mesureresult: 1,   // 计量结果
        date: '2022-07-20',   // 计量日期
        term_validity: '2023-07-20',   // 计量有效期
        head: '黄小明' ,  // 负责人
        create_time: '2023-07-20', // 创建日期
        create_person: '黄小明', // 创建人
        measure_code: 'QCX20230720' // 计量编号
      },{
        equipment_code: 'JSTC-W1-00001',  // 仪器设备编号
        equipment_name: '数字电桥',   // 仪器设备名称
        measure_range: '---',  // 测量范围
        measurecycle: '12月',   // 计量周期
        mesureresult: 0,   // 计量结果
        date: '2022-07-20',   // 计量日期
        term_validity: '2023-07-20',   // 计量有效期
        head: '黄小明' ,  // 负责人
        create_time: '2023-07-20', // 创建日期
        create_person: '黄小明', // 创建人
        measure_code: 'QCX20230720' // 计量编号
      },{
        equipment_code: 'JSTC-W1-00001',  // 仪器设备编号
        equipment_name: '数字电桥',   // 仪器设备名称
        measure_range: '---',  // 测量范围
        measurecycle: '12月',   // 计量周期
        mesureresult: 1,   // 计量结果
        date: '2022-07-20',   // 计量日期
        term_validity: '2023-07-20',   // 计量有效期
        head: '黄小明' ,  // 负责人
        create_time: '2023-07-20', // 创建日期
        create_person: '黄小明', // 创建人
        measure_code: 'QCX20230720' // 计量编号
      }],
      measurePlanTable: [{
        measure_number: 'QC568946512', // 计量单号
        equipment_code: '010101', // 设备编号
        equipment_name: '拉力机', // 设备名称
        scheduled_date: '2023-04-08 ~ 2023-08-08', // 计划日期
        measure_state: 1, // 计量状态
        head: '黄小明', // 计量负责人
        department: '地线检测', // 计量单位
        creater: '黄小明', // 创建人
        create_date: '2023-07-20', // 创建日期
      },{
        measure_number: 'QC568946512', // 计量单号
        equipment_code: '010101', // 设备编号
        equipment_name: '拉力机', // 设备名称
        scheduled_date: '2023-04-08 ~ 2023-08-08', // 计划日期
        measure_state: 1, // 计量状态
        head: '黄小明', // 计量负责人
        department: '地线检测', // 计量单位
        creater: '黄小明', // 创建人
        create_date: '2023-07-20', // 创建日期
      },{
        measure_number: 'QC568946512', // 计量单号
        equipment_code: '010101', // 设备编号
        equipment_name: '拉力机', // 设备名称
        scheduled_date: '2023-04-08 ~ 2023-08-08', // 计划日期
        measure_state: 0, // 计量状态
        head: '黄小明', // 计量负责人
        department: '地线检测', // 计量单位
        creater: '黄小明', // 创建人
        create_date: '2023-07-20', // 创建日期
      }],
      currentPage: 1,
      pageSize: 5,
      total: 20
    }
  },
  created(){
    this.getStandingPageList()
    // this.getPlanPageList()
  },
  methods: {
    // 请求计量台账分页列表
    async getStandingPageList(){
      const res = await getStandingPageList({pageNo:this.currentPage , pageSize:this.pageSize })
      // this.measureLedgerTable = res.data
      // console.log(this.measureLedgerTable)
    },
    // 请求计量计划分页列表
    async getPlanPageList(){
      const res = await getPlanPageList({})
    },
    handleSizeChange(val) {
      console.log(`当前每页${val}条数据`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前是第${val}页`)
      this.currentPage = val
    }
  }
}
</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;
          }
      }
      .pagination{
        display:flex;
        justify-content:end;
        margin-top: 20px
      }
    }

</style>