FE-V2-PC/src/views/medicUniversity-3_1/chemicalManagement/chemicalInventory/index.vue

<!--化学品盘点-->
<template>
  <div class="app-container chemicalManagement">
    <div class="chemicalManagement-page" v-if="pageType == 1">
      <div class="content-box">
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item label="关键字" prop="searchValue" label-width="60px">
            <el-input
              maxlength="10"
              v-model="queryParams.searchValue"
              placeholder="标题/实验室/房间号/盘点人"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="学院" prop="takeDpetId">
            <el-select v-model="queryParams.takeDpetId" placeholder="请选择学院" clearable>
              <el-option
                v-for="dict in deptOptions"
                :key="dict.deptId"
                :label="dict.deptName"
                :value="dict.deptId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查时间">
            <el-date-picker
            :clearable="false"
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <p class="inquire-button-one" @click="onSearch">查询</p>
            <p class="reset-button-one" @click="resetForm">重置</p>
          </el-form-item>
        </el-form>
        <el-table border :data="tableData" ref="multipleTable" @sort-change="sortChange">
          <el-table-column label="序号"  width="50" align="center"  type="index"/>
          <el-table-column label="标题" prop="takeTitle" show-overflow-tooltip/>
          <el-table-column label="学院" prop="takeDpetName" width="200" show-overflow-tooltip/>
          <el-table-column label="楼栋" prop="takeBuildName" width="180" show-overflow-tooltip/>
          <el-table-column label="实验室" prop="subName" width="300" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.subName}}-{{scope.row.subRoom}}
            </template>
          </el-table-column>
          <!--<el-table-column label="备注" width="250" show-overflow-tooltip/>-->
          <el-table-column label="盘点人" prop="createBy" width="120" show-overflow-tooltip/>
          <el-table-column label="盘点时间" prop="createTimeStr" width="200" sortable="custom" show-overflow-tooltip/>
          <el-table-column label="操作" width="100" v-if="tableButtonType">
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p" @click="controlsButton(2,scope.row)"
                   v-hasPermi="['chemical:takeStock:query']">详情</p>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]" v-show="total>0" :total="total"
                    layout="total, prev, pager, next, sizes, jumper"
                    :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                    @pagination="getList"/>
      </div>
    </div>
    <info-page v-if="pageType == 2" :infoDataProps="infoDataProps"></info-page>
  </div>
</template>

<script>
  import { listDepartments } from "@/api/system/dept";
  import { hxpTakeStockList } from '@/api/chemicalInventory/index'
  import infoPage from './infoPage.vue'
  export default {
    name: 'chemicalManagement',
    components: {
      infoPage
    },
    data(){
      return{
        tableButtonType:this.hasPermiDom(['chemical:takeStock:query']),
        pageType:1,
        deptOptions:[],
        queryParams:{
          pageNum:1,
          pageSize:20,
          searchValue:"",
          takeDpetId:"",
          orderTime:'1',
        },
        dateRange:[],
        tableData:[],
        total:0,
        infoDataProps:{},
      }
    },
    created(){},
    mounted(){
      this.listDepartments();
      this.getList();
    },
    methods:{
      //搜索
      onSearch(){
        this.$set(this.queryParams,'pageNum',1);
        this.getList();
      },
      //重置
      resetForm(){
        this.$set(this,'dateRange',[]);
        this.$set(this,'queryParams',{
          pageNum:1,
          pageSize:20,
          searchValue:"",
          takeDpetId:"",
          orderTime:'1',
        });
        this.getList();
      },
      //查询列表
      getList(){
        this.loading = true;
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        if(this.dateRange[0]){
          obj.beginTimeStr = this.dateRange[0];
          obj.endTimeStr = this.dateRange[1];
        }else {
          obj.beginTimeStr = null
          obj.endTimeStr = null
        }
        hxpTakeStockList(obj).then( response => {
          this.$set(this,'tableData',response.rows);
          this.$set(this,'total',response.total);
          this.loading = false;
        });
      },
      //时间排序方法
      sortChange(val){
        if(val.prop == 'createTimeStr'){
          this.$set(this.queryParams,'orderTime',val.order=='ascending'?'1':(val.order=='descending'?'2':''));
          this.onSearch();
        }
      },
      //详情
      controlsButton(type,row){
        if(type == 1){
          this.$set(this,'pageType',1);
        }else if(type == 2){
          this.$set(this,'pageType',2);
          this.$set(this,'infoDataProps',row);
        }
      },
      listDepartments(){
        listDepartments().then( response => {
          this.$set(this,'deptOptions',response.data);
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .chemicalManagement{
    flex:1;
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    font-weight: 500;
    .chemicalManagement-page{
      flex:1;
      display: flex!important;
      flex-direction: column;
      overflow: hidden;
      .title-box{
        padding-top:20px;
        .form-box{
          border-bottom:1px solid #E0E0E0;
        }
      }
      .content-box{
        flex:1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding:20px;
      }
    }

  }
</style>