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="title-box">
        <el-form class="form-box" :model="queryParams" ref="examineForm" :inline="true">
          <el-form-item label="关键字" prop="name" label-width="80px">
            <el-input
              maxlength="10"
              v-model="queryParams.searchValue"
              placeholder="课程名称/主讲老师"
              clearable
              size="small"/>
          </el-form-item>
          <el-form-item label="启动条件" prop="deptId">
            <el-select v-model="queryParams.deptId" placeholder="请选择启动条件" clearable size="small">
              <el-option
                v-for="dict in deptOptions"
                :key="dict.code"
                :label="dict.name"
                :value="dict.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
            :clearable="false"
            v-model="dateRange"
            size="small"
            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>
      </div>
      <div class="content-box">
        <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="courseName" show-overflow-tooltip/>
          <el-table-column label="学院" prop="place" width="200" show-overflow-tooltip/>
          <el-table-column label="楼栋" prop="place" width="180" show-overflow-tooltip/>
          <el-table-column label="实验室" prop="place" width="200" show-overflow-tooltip/>
          <el-table-column label="备注" prop="place" width="250" show-overflow-tooltip/>
          <el-table-column label="盘点人" prop="place" width="120" show-overflow-tooltip/>
          <el-table-column label="盘点时间" prop="inventoryTime" width="200" sortable="custom" show-overflow-tooltip/>
          <el-table-column label="操作" width="100">
            <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)">详情</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 infoPage from './infoPage.vue'
  export default {
    name: 'chemicalManagement',
    components: {
      infoPage
    },
    data(){
      return{
        pageType:1,
        deptOptions:[],
        queryParams:{
          pageNum:1,
          pageSize:20,
          searchValue:"",
          deptId:"",
        },
        dateRange:[],
        tableData:[{}],
        total:0,
        infoDataProps:{},
      }
    },
    created(){},
    mounted(){},
    methods:{
      //搜索
      onSearch(){
        this.$set(this.queryParams,'pageNum',1);
        this.getList();
      },
      //重置
      resetForm(){
        this.$set(this,'dateRange',[]);
        this.$set(this,'queryParams',{
          pageNum:1,
          pageSize:20,
          searchValue:"",
          deptId:"",
        });
        this.getList();
      },
      //查询列表
      getList(){

      },
      //时间排序方法
      sortChange(val){
        if(val.prop == 'inventoryTime'){
          this.$set(this.queryParams,'zgTimeOrder',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);
        }
      },
    }
  }
</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>