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

<!--使用记录-->
<template>
  <div class="app-container usageRecord">
    <div class="usageRecord-page" v-if="pageType == 1">
      <advanced-search :searchData="searchData"></advanced-search>
      <div class="usageRecord-min">
        <el-table  border :data="tableList" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
          <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
          <el-table-column label="化学品编号" align="center" prop="joinNum" width="130"/>
          <el-table-column label="化学品名" align="center" prop="chemicalName" width="180"/>
          <el-table-column label="CAS号" align="center" prop="casNum" width="180"/>
          <!--<el-table-column label="形态" align="center" prop="chemicalShape" width="121"/>-->
          <!--<el-table-column label="规格" align="center" prop="chemicalAmountUnit" width="121"/>-->
          <el-table-column label="分类" align="center" prop="classifyName" width="181"/>
          <!--<el-table-column label="属性" align="center" prop="classifyAttribute" width="220" show-overflow-tooltip/>-->
          <!--<el-table-column label="标签类型" align="center" prop="labelContent" width="121"/>-->
          <!--<el-table-column label="标签编号" align="center" prop="tagCode" width="130"/>-->
          <el-table-column label="化学品柜" align="center" prop="cabinetName" width="200" show-overflow-tooltip/>
          <el-table-column label="位置" align="center" prop="posi" width="300" show-overflow-tooltip/>
          <el-table-column label="领用时间" align="center" prop="collectTime" width="170"/>
          <el-table-column label="归还时间" align="center" prop="returnTime" width="170"/>
          <!--<el-table-column label="归还方式" align="center" prop="returnTypeContent" width="130"/>-->
          <el-table-column label="领用时库存" align="center" prop="collectStockNum" width="120"/>
          <el-table-column label="领用净重" align="center" prop="collectWeigh" width="120"/>
          <el-table-column label="损耗量" align="center" prop="lossAmount" width="120"/>
          <el-table-column label="使用量" align="center" prop="useStockNum" width="120"/>
          <el-table-column label="剩余库存" align="center" prop="returnStockNum" width="120"/>
          <el-table-column label="状态" align="center" prop="useStatus" width="120">
            <template slot-scope="scope"><span :class="scope.row.useStatus == '使用中'?'table-color-1':(scope.row.useStatus == '超时未归还'?'table-color-2':'')">{{scope.row.useStatus}}</span></template>
          </el-table-column>
          <el-table-column label="操作人" align="center" prop="operator" width="220" show-overflow-tooltip/>
          <!--<el-table-column label="双人验证" align="center" prop="verify" width="220" show-overflow-tooltip>-->
          <!--<template slot-scope="scope">-->
          <!--{{scope.row.verify?scope.row.verify:'无'}}-->
          <!--</template>-->
          <!--</el-table-column>-->
          <el-table-column label="操作" align="center" prop="operator" width="100">
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p"
                   @click="goPageInfo(2,scope.row)"
                >详情</p>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;height:32px;margin-top:15px;">
          <!--<p style="flex:4;"></p>-->
          <p style="text-align: left;margin:0;line-height:32px;margin-right:20px;font-size:14px;color:#999;">
            <i class="el-icon-warning" style="color:#0183FA;"></i>
            已选择 {{selectedNum}} 项
          </p>
          <div style="flex:5;">
            <pagination :page-sizes="[20, 30, 40, 50]"
                        v-show="total>0"
                        :total="total"
                        style="margin:0;"
                        :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"
            />
          </div>
        </div>
      </div>
    </div>
    <info-page :infoData="infoData" v-if="pageType == 2"></info-page>
  </div>
</template>

<script>
  import { classifyList,getNoauthList,getHxpUserecordList,getQueryDetail } from "@/api/medicUniversity-3_1/index";
  import { listDepartments } from "@/api/system/dept";
  import advancedSearch from "@/components/ZDcomponents/advancedSearch.vue"
  import infoPage from "./infoPage.vue"
  export default {
    name: "usageRecord",
    components: {
      advancedSearch,
      infoPage
    },
    data() {
      return {
        pageType:1,
        searchData:{
          buttonList:[//按钮数组没有则为空
            {
              type:"3", //按钮类型 1.按钮 2.导入 3.导出
              parameter:"export",//按钮字符用于返回方法时的判断
              hasPermi:['chemical:hxpUserecord:export'] // 权限字段 如果没有则传空字符 hasPermi:"",
            },
          ],
          searchList:[//搜索数组
            {
              name:"关键字",//描述名称
              key:"searchValue",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"化学品名/别名/CAS号/编号/实验室",//输入提示
              level:"1",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"1",//类型 1.input 2.select 3.TimePicker
              universal:'20',//通用参数 input时为最大长度 //TimePicker时可不传
              labelWidth:'68px',//label-width宽度  可传可不传 不传时为默认宽度
              width:'260',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
            {
              name:"化学品分类",//描述名称
              key:"chemicalClassify",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"请选择化学品分类",//输入提示
              level:"2",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[],
              width:'200',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
            {
              name:"学院",//描述名称
              key:"deptId",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"请选择学院",//输入提示
              level:"2",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[],
              width:'175',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
            {
              name:"化学品柜",//描述名称
              key:"cabinetId",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"请选择化学品柜",//输入提示
              level:"1",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[],
              width:'175',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
            {
              name:"属性",//描述名称
              key:"classifyAttribute",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"请选择属性",//输入提示
              level:"2",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[],
              width:'175',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
            {
              name:"状态",//描述名称
              key:"useStatus",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"请选择状态",//输入提示
              level:"1",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[ //通用参数 select时为列表数据 //TimePicker时可不传
                {label:"使用中",value:"1"},{label:"超时未归还",value:"2"},{label:"已归还",value:"0"},
              ],
              width:'175',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
            {
              name:"标签类型",//描述名称
              key:"labelType",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"请选择标签类型",//输入提示
              level:"2",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"2",//类型 1.input 2.select 3.TimePicker
              universal:[ //通用参数 select时为列表数据 //TimePicker时可不传
                {label:"RFID",value:"1"},{label:"二维码",value:"2"}
              ],
              labelWidth:'68px',//label-width宽度  可传可不传 不传时为默认宽度
              width:'260',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
            {
              name:"领用时间",//描述名称
              key:"timeOne",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"请选择领用时间",//输入提示
              level:"2",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"3",//类型 1.input 2.select 3.TimePicker
              labelWidth:'82px',//label-width宽度  可传可不传 不传时为默认宽度
              width:'240',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
            {
              name:"归还时间",//描述名称
              key:"timeTwo",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"请选择归还时间",//输入提示
              level:"2",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"3",//类型 1.input 2.select 3.TimePicker
              labelWidth:'82px',//label-width宽度  可传可不传 不传时为默认宽度
              width:'240',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
          ],
        },
        // 搜索实际发送数据
        queryParams:{
          pageNum:1,
          pageSize:20,
        },
        //数据数量
        total:0,
        //数据数组
        tableList:[],
        //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
        selectedNum:0,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        //详情组件传参
        infoData:{},
      };
    },
    created() {

    },
    mounted(){
      this.classifyList();
      this.listDepartments();
      this.getNoauthList();
      this.getHxpClassifyattribute();
      this.getList();
    },
    methods: {
      //操作按钮
      goPageInfo(type,row){
        if(type == 1){
          this.$set(this,'pageType',1);
          this.$set(this,'infoData',{});
        }else if(type == 2){
          this.getQueryDetail(row);
        }
      },
      getQueryDetail(row){
        getQueryDetail(row.id).then(response => {
          this.$set(this,'infoData',response.data);
          this.$set(this.infoData,'useStatus',row.useStatus);
          this.$set(this.infoData,'collectTime',row.collectTime);
          this.$set(this.infoData,'returnTime',row.returnTime);
          this.$set(this.infoData,'operator',row.operator);
          this.$set(this,'pageType',2);
        });
      },
      //获取属性列表
      getHxpClassifyattribute(){
        this.getDicts("hxp_classifyattribute").then(response => {
          let list = [];
          for(let i=0;i<response.data.length;i++){
            let obj ={
              value:response.data[i].dictValue,
              label:response.data[i].dictLabel,
            }
            list.push(obj);
          }
          this.$set(this.searchData.searchList[4],'universal',list);
        })
      },
      //获取化学品柜列表
      getNoauthList(){
        getNoauthList({}).then(response => {
          let list = [];
          for(let i=0;i<response.data.length;i++){
            let obj ={
              value:response.data[i].id,
              label:response.data[i].cabinetName,
            }
            list.push(obj);
          }
          this.$set(this.searchData.searchList[3],'universal',list);
        });
      },
      //获取学院列表
      listDepartments(){
        listDepartments().then(response => {
          let list = [];
          for(let i=0;i<response.data.length;i++){
            let obj ={
              value:response.data[i].deptId,
              label:response.data[i].deptName,
            }
            list.push(obj);
          }
          this.$set(this.searchData.searchList[2],'universal',list);

        });
      },
      //获取化学品分类列表
      classifyList(){
        classifyList().then(response => {
          let list = [];
          for(let i=0;i<response.rows.length;i++){
            let obj ={
              value:response.rows[i].id,
              label:response.rows[i].classifyName,
            }
            list.push(obj);
          }
          this.$set(this.searchData.searchList[1],'universal',list);
        });
      },
      getList(){
        getHxpUserecordList(this.queryParams).then(response => {
          this.total = response.total;
          this.tableList = response.rows;
        });
      },
      //父组件必要此方法用于接收参数
      searchClick(type,data){
        let self = this;
        if(type == 1){ //type  1.查询
          this.queryParams = JSON.parse(JSON.stringify(data));
          if(data.timeOne){
            this.queryParams.collectTimeBegin = data.timeOne[0];
            this.queryParams.collectTimeEnd = data.timeOne[1];
            delete this.queryParams.timeOne
          }else{
            delete this.queryParams.timeOne
          }
          if(data.timeTwo){
            this.queryParams.returnTimeBegin = data.timeTwo[0];
            this.queryParams.returnTimeEnd = data.timeTwo[1];
            delete this.queryParams.timeTwo
          }else{
            delete this.queryParams.timeTwo
          }
          this.queryParams.pageNum = 1;
          this.queryParams.pageSize = 20;
          this.getList();
        }else if(type == 2){ //type  1.重置
          this.queryParams = {
            pageNum : 1,
            pageSize:20,
          };
          this.getList();
        }else if(type == 'export'){ //type  其他 自定义按钮
          let currentDate = this.getCurrentTime()
          if(data == 1){
            //导出全部
            self.$confirm(`确认导出全部数据?`, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(async () => {
              self.download('/chemical/hxpUserecord/export/', {...self.queryParams}, '使用记录-'+currentDate+'.xlsx')
            }).catch(() => {})
          }else if(data == 2){
            //导出选中
            if(self.ids.length>0) {
              self.$confirm(`确认导出选中数据?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(async () => {
                let ids = self.ids.join(',');
                let obj = {
                  ids :ids
                }
                self.download(`/chemical/hxpUserecord/export/`,obj, '使用记录-'+currentDate+'.xlsx')
              }).catch(() => {})
            }else {
              this.msgError('请选择要导出的数据')
            }
          }
        }
      },
      /** 当前时间 */
      getCurrentTime () {
        const yy = new Date().getFullYear()
        const mm = new Date().getMonth() + 1
        const dd = new Date().getDate()
        const hh = new Date().getHours()
        const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
        const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
        return yy + '-' + mm + '-' + dd
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.selectedNum = selection.length;
        this.ids = selection.map(item => item.id);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.id
      },
    }
  }
</script>

<style scoped lang="scss">
  .usageRecord{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden!important;
    p{
      margin:0;
      padding:0;
    }
    .usageRecord-page{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden!important;
      padding-top:20px!important;
      .usageRecord-min{
        flex:1;
        display: flex;
        flex-direction: column;
        overflow: hidden!important;
        padding:0 20px 20px!important;
        .table-color-1{
          color:#0183FA;
        }
        .table-color-2{
          color:#FF4D4D;
        }
      }
    }
  }
</style>