FE-V2-PC/src/views/studentViews/chemicalManagement/studentChemicalInfo/index.vue

<!--化学品存放-->
<template>
  <div class="app-container listPage">
    <div class="listPage-min" v-if="pageType == 1">
      <el-form :model="queryParamsData" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="关键字" prop="searchValue">
          <el-input
            maxlength="20"
            v-model="queryParamsData.searchValue"
            placeholder="化学品名/别名/CAS号/编号/实验室"
            style="width:260px;"
            clearable/>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParamsData.status" clearable placeholder="请选择状态">
            <el-option
              v-for="item in optionsListTwo"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float: right;">
          <el-col :span="1.5">
            <p class="inquire-button-one"
               style="width:100px;"
               @click="pageToggle(2)"
            >化学品存放</p>
          </el-col>
        </el-form-item>
        <el-form-item>
          <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
          <p class="reset-button-one" @click="resetQuery">重置</p>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" border :data="tableList">
        <el-table-column label="化学品编号" align="center" prop="joinNum" width="130px" show-overflow-tooltip/>
        <el-table-column label="化学品名" align="center" prop="chemicalName" width="130px" show-overflow-tooltip/>
        <el-table-column label="容量规格" align="center" prop="chemicalAmountUnit" width="150px" show-overflow-tooltip/>
        <el-table-column label="容器规格" align="center" prop="tare" width="150px" show-overflow-tooltip/>
        <el-table-column label="过期时间" align="center" prop="expireTime" width="150px" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.expireTime?scope.row.expireTime:'未设定'}}</template>
        </el-table-column>
        <el-table-column label="化学品柜" align="center" prop="cabinetName" width="130px" show-overflow-tooltip/>
        <el-table-column label="柜锁名称" align="center" prop="lockName" width="150px" show-overflow-tooltip v-if="$store.state.settings.smartAlarmType == 1"/>
        <el-table-column label="位置" align="center" prop="posi" show-overflow-tooltip/>
        <el-table-column label="化学品柜编号" align="center" prop="cabinetNum"  width="148px"/>
        <el-table-column label="状态" align="center" prop="cabinetStatus" width="117px" />
        <el-table-column label="关联时间" align="center" prop="createTime" width="170px"/>
      </el-table>
      <pagination :page-sizes="[20, 30, 40, 50]"
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <add-page v-if="pageType == 2"></add-page>
  </div>
</template>

<script>
  import { getQueryByUser } from "@/api/studentApi/chemicalManagement/index";
  import addPage from "./addPage.vue"
  export default {
    name: "listPage",
    components: {
      addPage
    },
    data() {
      return {
        pageType:1,
        loading:false,
        //数据数量
        total:0,
        tableList:[],
        //状态列表
        optionsListTwo:[{id:"0",name:"未入库"},{id:"1",name:"已入库"},{id:"2",name:"已出库"}],
        // 搜索数据
        queryParamsData:{
          pageNum:1,
          pageSize:20,
        },
        // 搜索实际发送数据
        queryParams:{
          pageNum:1,
          pageSize:20,
        },
        // 查询
        selectList:[],
        //查询历史记录
        recordList:[],
      };
    },
    created() {

    },
    mounted(){
      this.getList();
      this.getRecord();
    },
    methods: {
      pageToggle(type){
        if(type == 1){
          this.pageType = 1;
        }else if(type == 2){
          this.pageType = 2;
        }
      },
      //获取数据列表
      getList(){
        this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
        getQueryByUser(this.queryParamsData).then(response => {
          this.tableList = response.rows;
          this.total = response.total
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParamsData.pageNum = 1;
        this.queryParamsData.pageSize = 20;
        this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this,'queryParamsData',{});
        this.$set(this,'queryParams',{});
        this.handleQuery();
      },
      //获取选择记录
      getRecord(){
        if(localStorage.getItem('subRecord')){
          //历史记录
          this.recordList = JSON.parse(localStorage.getItem('subRecord'));
          //当前列表
          this.selectList = JSON.parse(localStorage.getItem('subRecord'));
        }else{
          this.recordList = [];
          this.selectList = [];
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .listPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-weight:500;
    p{
      margin:0;
      padding:0;
    }
    .listPage-min{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding:20px;
    }
  }
</style>
<style lang="scss">
  .ChemicalInfo-listPage-dialog{
    p{
      margin:0;
    }
    .dialog-title{
      margin-left:10px;
      margin-bottom:20px;
      font-weight:700;
    }
    .for-max-big-box{
      padding:20px;
      background: #f5f5f5;
      margin-bottom:12px;
      .for-max-title-box{
        display: flex;
        p:nth-child(1){
          background: #0045AF;
          width: 3px;
          height: 16px;
        }
        p:nth-child(2){
          height: 16px;
          font-size: 16px;
          color: #333333;
          line-height: 16px;
          margin-left:12px;
        }
      }
      .for-big-box{
        margin-top:20px;
        .for-big-title-p{
          height:50px;
          line-height:50px;
          padding:0 22px;
          font-size: 16px;
          color:#333333;
          background: #CCE6FE;
        }
        .for-big-for-max-box{
          border:1px solid #E0E0E0;
          .for-big-for-max-title-box{
            height:60px;
            display: flex;
            p:nth-child(1){
              flex:1;
              font-size:14px;
              line-height:60px;
              margin-left:22px;
            }
            p:nth-child(2){
              width:80px;
              height: 30px;
              line-height:30px;
              border-radius: 6px;
              border: 1px solid #0045AF;
              text-align: center;
              margin:16px 14px;
              color:#0045AF;
              font-size:12px;
              cursor: pointer;
            }
          }
          .for-min-box{
            margin-bottom:10px;
          }
        }
      }
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none!important;
      }
      /* 在Firefox浏览器下 */
      input[type="number"]{
        -moz-appearance: textfield!important;
      }
      .el-form-item__label{
        font-weight:400;
      }
      .el-form-item-button-box{
        .el-input-number__decrease{
          height:38px;
          width:38px;
          line-height:38px;
        }
        .el-input-number__increase{
          height:38px;
          width:38px;
          line-height:38px;
        }
      }
    }
  }
</style>