shelveindex.vue 4.21 KB
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="5" :xs="24">
        <div class="head-container">
          <el-tree
            :data="options"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            :default-expand-all=true
            node-key="id"
            ref="tree"
            show-checkbox
            highlight-current
            @check="handleNodeClick"
          />
        </div>
      </el-col>
      <el-col :span="19" :xs="24" >
        <el-table  v-loading="loading" :data="list" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="年度" align="center" prop="year"  />
          <el-table-column label="卷盒规格" align="center"  prop="boxRule" />
          <el-table-column label="盒号" align="center"  prop="boxMark" />
          <el-table-column label="库位码" align="center" prop="deportNodeId" />
          <el-table-column label="描述" align="center" prop="describes" />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {treeselect} from "@/api/service/depot";
import {listByIds, shelve, shelveDown, updateBox} from "@/api/archives/box";

export default {
  name: "shelveBox",
  props: {
    ids: {
      type: Array,// 这里你接收的值是什么类型就写什么类型
    },
    shelveType: {
      type: Number,// 这里你接收的值是什么类型就写什么类型
    }
  },
  data() {
    return {
      options: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      multiple: true,
      single:true,
      loading: true,
      list: [],
      queryParams:{
        depotNodeId:undefined
      },
      params:{
        depotNodeId:undefined,
        ids:undefined,
        depotCode:undefined
      }
    };
  },
  created() {
    this.getTreeselect();
  },
  methods: {
    getTreeselect() {
      treeselect().then(response => {
        this.options = response.data;
        let id=response.data[0].id;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.clearCheck();
      this.$refs.tree.setChecked(data.id,true,false);
      this.params.depotNodeId=data.id;
      this.params.depotCode=data.depotCode;
      this.queryParams.deportNodeId=data.depotCode;
      this.deportNodeId=data.depotCode;
      this.getList();
    },
    clearCheck(){
      let arr=this.$refs.tree.getCheckedKeys(true);
      arr.forEach(k=>{
        this.$refs.tree.setChecked(k,false,false);
      })
      this.queryParams.deportNodeId=undefined;
      this.params.depotNodeId=undefined;
      this.params.ids=undefined;
      this.params.depotCode=undefined;
    },
    getList() {
      this.loading = true;
      if(this.shelveType==2 && this.queryParams.deportNodeId==undefined){
        this.queryParams.deportNodeId='isNotNull'
      }
      if(this.shelveType==1){
        this.queryParams.deportNodeId='isNull'
      }
      listByIds(this.queryParams,this.ids).then(response => {
        this.list = response.rows;
        this.loading = false;
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.params.ids= selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    shelve(){
      if(this.params.depotNodeId==undefined){
        this.$modal.msgWarning("请选择档案架")
        return;
      }
      if(this.params.ids==undefined||this.params.ids.length==0){
        this.$modal.msgWarning("至少选择一条")
        return;
      }
      shelve(this.params).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.getList();
      });
    },
    shelveDown(){
      if(this.params.ids==undefined||this.params.ids.length==0){
        this.$modal.msgWarning("至少选择一条")
        return;
      }
      shelveDown(this.params).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.getList();
      });
    }
  }
}
</script>