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

<!--库存明细-->
<template>
  <div class="app-container InventoryDetails">
    <advanced-search :searchData="searchData"></advanced-search>
    <div class="InventoryDetails-min">
      <el-table  border :data="tableList" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
        <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
        <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="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="classifyName" width="181"/>
        <el-table-column label="属性" align="center" prop="classifyAttribute" width="158" show-overflow-tooltip/>
        <el-table-column label="容量规格" align="center" prop="chemicalAmountUnit" width="121"/>
        <el-table-column label="容器规格" align="center" prop="tareUnit" width="121"/>
        <el-table-column label="标签类型" align="center" prop="labelType" width="121"/>
        <el-table-column label="标签编号" align="center" prop="tagCode" width="130"/>
        <el-table-column label="过期时间" align="center" prop="expirationTime" width="130"/>
        <el-table-column label="原始库存" align="center" prop="usages" width="120"/>
        <el-table-column label="实时库存" align="center" prop="outUsages" width="120"/>
        <el-table-column label="状态" align="center" prop="stockStatus" width="100"/>
        <el-table-column label="入库时间" align="center" prop="joinTime" width="183"/>
        <el-table-column label="出库时间" align="center" prop="outTime" width="183"/>
      </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>
</template>

<script>
  import { classifyList,getNoauthList,getListDetail } from "@/api/medicUniversity-3_1/index";
  import { listDepartments } from "@/api/system/dept";
  import advancedSearch from "@/components/ZDcomponents/advancedSearch.vue"
  export default {
    name: "InventoryDetails",
    components: {
      advancedSearch
    },
    data() {
      return {
        searchData:{
          buttonList:[//按钮数组没有则为空
            {
              type:"3", //按钮类型 1.按钮 2.导入 3.导出
              parameter:"export",//按钮字符用于返回方法时的判断
              hasPermi:['chemical:hxpStock:detailExport'] // 权限字段 如果没有则传空字符 hasPermi:"",
            },
          ],
          searchList:[//搜索数组
            {
              name:"关键字",//描述名称
              key:"searchValue",//键名 用于返回数据
              value:"",//内容 用于组件内绑定数据
              placeholder:"化学品名/别名/CAS号/编号/实验室",//输入提示
              level:"1",//1.普通搜索 2.高级搜索  普通搜索默认会在高级搜索时显示
              type:"1",//类型 1.input 2.select 3.TimePicker
              universal:'20',//通用参数 input时为最大长度 //TimePicker时可不传
              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:'175',//el-form-item 长度 可传可不传 不传时input/select默认180长度 TimePicker默认240长度
            },
            {
              name:"状态",//描述名称
              key:"status",//键名 用于返回数据
              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:"3"},
              ],
              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:'180',//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"}
              ],
              width:'180',//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:[],
              labelWidth:'54px',//label-width宽度  可传可不传 不传时为默认宽度
              width:'180',//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
              width:'260',//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
              width:'260',//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,
      };
    },
    created() {

    },
    mounted(){
      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);
      })
      this.classifyList();
      this.listDepartments();
      this.getNoauthList();
      this.getList();
    },
    methods: {
      //获取化学品柜列表
      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[6],'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(){
        getListDetail(this.queryParams).then(response => {
          this.total = response.total;
          this.tableList = response.rows;
        });
      },
      //父组件必要此方法用于接收参数
      searchClick(type,data){
        let self = this;
        if(type == 1){ //type  1.查询
          console.log(data);
          this.queryParams = JSON.parse(JSON.stringify(data));
          if(data.timeOne){
            this.queryParams.joinTimeBegin = data.timeOne[0];
            this.queryParams.joinTimeEnd = data.timeOne[1];
            delete this.queryParams.timeOne
          }else{
            delete this.queryParams.timeOne
          }
          if(data.timeTwo){
            this.queryParams.outTimeBegin = data.timeTwo[0];
            this.queryParams.outTimeEnd = data.timeTwo[1];
            delete this.queryParams.timeTwo
          }else{
            delete this.queryParams.timeTwo
          }
          this.queryParams.pageNum = 1;
          this.queryParams.pageSize = 10;
          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/hxpStock/exportDetail/', {...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/hxpStock/exportDetail/`,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">
  .InventoryDetails{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden!important;
    padding-top:20px!important;
    p{
      margin:0;
      padding:0;
    }
    .InventoryDetails-min{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden!important;
      padding:0 20px 20px!important;
    }
  }
</style>