v3-lab-web/src/views/iotDevice/appManage/applyList/batchUpDialog.vue

<template>
  <div class="applyList-batchUpDialog">
    <el-dialog class="batchUpDialog" :title="batchUpDialogTitle"
               :visible.sync="batchUpDialogType" v-if="batchUpDialogType" width="1240px" height="700"
               append-to-body :close-on-click-modal="false" @close="dialogOff()">
      <div class="page-form-title-box" style="border:none;padding:0;height:60px;">
        <el-form :model="queryParams" class="form-box" ref="queryForm"
                 :inline="true" style="width:100%;">
          <el-form-item label="" prop="schoolId">
            <el-select v-model="queryParams.schoolId" @change="changeSchool"
                       placeholder="请选择校区" style="width: 150px">
              <el-option v-for="(item,index) in schoolOption"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="buildId">
            <el-select v-model="queryParams.buildId" @change="buildSchool"
                       placeholder="请选择楼栋" style="width: 150px">
              <el-option v-for="(item,index) in buildOption"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="subjectId">
            <el-select v-model="queryParams.subjectId"
                       placeholder="请选择实验室" style="width: 150px">
              <el-option v-for="(item,index) in subjectOption"
                         :key="item.subId"
                         :label="item.subName"
                         :value="item.subId"/>
            </el-select>
          </el-form-item>
          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
        </el-form>
      </div>
      <div class="page-content-box" style="padding:0;height:500px;">
        <el-table class="table-box" border :data="tableList" ref="multipleTable" :row-key="getRowKeys"
                  tooltip-effect="dark" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
          <el-table-column label="名称" align="center" prop="deviceName" show-overflow-tooltip/>
          <el-table-column label="编号" align="center" prop="deviceNo" show-overflow-tooltip width="300"/>
          <el-table-column label="类型" align="center" prop="name" show-overflow-tooltip width="200"/>
          <el-table-column label="位置" align="center" prop="subjectName" show-overflow-tooltip width="200">
            <template slot-scope="scope">
              <span>{{scope.row.subjectName?scope.row.subjectName:'--'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="当前版本" align="center" prop="appName" show-overflow-tooltip width="200">
            <template slot-scope="scope">
              <span>{{scope.row.appName}} {{scope.row.version?' ('+scope.row.version+')':''}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="selected-num-box" v-show="total>0">
          <p class="selected-num-p">
            <i class="el-icon-warning"></i>
            已选择 {{selectedNum}} 项
          </p>
          <pagination :page-sizes="[20, 30, 40, 50]"
                      :total="total"
                      :page.sync="queryParams.page"
                      :limit.sync="queryParams.pageSize"
                      @pagination="getList"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="dialogOff">取消</p>
        <p class="dialog-footer-button-primary" @click="dialogSubmit">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { iotAppInfoUpgradeDevices,iotAppInfoBatchUpgrade, } from "@/api/iotDevice/index";
  import { systemBuildingGetTreeList,laboratorySubRelInfoGetListByFloor } from "@/api/commonality/permission";
  export default {
    name: 'batchUpDialog',
    data(){
      return{
        typeId:null,
        batchUpDialogTitle:'',
        batchUpDialogType:false,
        //校区楼栋原始数据
        addressList:[],
        //校区下拉列表
        schoolOption:[],
        //楼栋下拉列表
        buildOption:[],
        //实验室下拉列表
        subjectOption:[],
        //列表相关
        optionList:[],
        queryParams:{
          page:1,
          pageSize:20,
          schoolId:null,
          buildId:null,
          subjectId :null,
        },
        tableList:[],
        total:0,
        //勾选相关
        selectedNum:0,
        ids:[],
      }
    },
    created(){

    },
    mounted(){
      this.systemBuildingGetTreeList();
    },
    methods:{
      //提交
      dialogSubmit(){
        if(!this.ids[0]){
          this.msgError('请勾选设备')
        }else{
          let obj = {
            id:this.typeId,
            isAll:false, // true.全部升级 false.勾选升级
            ids:this.ids
          }
          iotAppInfoBatchUpgrade(obj).then(response => {
            this.msgSuccess(response.message)
            this.dialogOff();
          });
        }
      },
      //开启
      dialogOpen(row){
        this.$set(this,'batchUpDialogTitle',row.name+' ('+row.info+') '+'- 批量升级');
        this.$set(this,'typeId',row.id);
        this.$set(this,'batchUpDialogType',true);
        this.$nextTick(()=>{
          this.resetQuery();
        })
      },
      //关闭
      dialogOff(){
        this.$set(this,'batchUpDialogType',false);
        this.$set(this,'batchUpDialogTitle','');
      },
      //查询
      handleQuery(){
        this.$refs.multipleTable.clearSelection();
        this.$set(this.queryParams,'page',1);
        this.$set(this,'selectedNum',0);
        this.$set(this,'ids',[]);
        this.getList();
      },
      //重置
      resetQuery(){
        //清除选中
        this.$refs.multipleTable.clearSelection();
        this.$set(this,'queryParams',{
          page:1,
          pageSize:20,
          schoolId:null,
          buildId:null,
          subjectId :null,
        });
        this.$set(this,'selectedNum',0);
        this.$set(this,'ids',[]);
        this.getList();
      },
      getList(){
        let obj = JSON.parse(JSON.stringify(this.queryParams))
        obj.id = this.typeId;
        iotAppInfoUpgradeDevices(obj).then(response => {
          this.$set(this,'tableList',response.data.records);
          this.$set(this,'total',response.data.total);
        });
      },
      //获取校区
      systemBuildingGetTreeList(){
        systemBuildingGetTreeList({}).then(response => {
          let list = [];
          for(let i=0;i<response.data.length;i++){
            list.push({
              id:response.data[i].id,
              name:response.data[i].name,
            })
          }
          this.$set(this,'schoolOption',list);
          this.$set(this,'addressList',response.data);
        })
      },
      //校区选中
      changeSchool(val){
        let self = this;
        let list = [];
        for(let i=0;i<self.addressList.length;i++){
          if(val == self.addressList[i].id && self.addressList[i].buildFloorVoList[0]){
            for(let o=0;o<self.addressList[i].buildFloorVoList.length;o++){
              list.push({
                id:self.addressList[i].buildFloorVoList[o].id,
                name:self.addressList[i].buildFloorVoList[o].name,
              })
            }
          }
        }
        this.$set(this.queryParams,'buildId',null);
        this.$set(this.queryParams,'subjectId',null);
        this.$set(this,'buildOption',list);
        this.$set(this,'subjectOption',[]);
      },
      //楼栋选中
      buildSchool(val){
        laboratorySubRelInfoGetListByFloor({buildId:val}).then(response => {
          this.$set(this.queryParams,'subjectId',null);
          this.$set(this,'subjectOption',response.data);
        })
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.deviceId
      },
      //多选框选中数据
      handleSelectionChange(selection) {
        this.selectedNum = selection.length;
        this.ids = selection.map(item => item.deviceId)
      },
    },
  }
</script>

<style scoped lang="scss">
  .applyList-batchUpDialog{
    .content-box{
      flex:1;
      display: flex;
      padding:20px;
    }
  }
</style>