vue elementUI小工具（加载进度条等，持续更新）

记录一下自己开发的小插件

1、加载进度条，倒计时90秒（带遮罩）

<div class="loading-overlay" v-if="loadingVisible">
      <el-progress type="circle" :percentage="loadingPercentage" :stroke-width="20" ></el-progress>
      <p class="tips_css">升级中，请稍后！</p>
</div>


//data
loadingPercentage: 0,//进度百分比
timer: null,//定时器
loadingVisible: false,//开启遮罩


//methods
startLoading() {
      this.loadingVisible = true;
      this.loadingPercentage = 0;
      
      this.timer = setInterval(() => {
        if (this.loadingPercentage < 100) {
          this.loadingPercentage += 1;
        } else {
          clearInterval(this.timer); // 停止计时器
          
          // 延时 1 秒后执行关闭遮罩或其他操作
          setTimeout(() => {
            this.loadingVisible = false;
            // 关闭遮罩或执行其他操作
          }, 1000);
        }
      }, 900); // 每 900 毫秒（0.9秒）增加 1% 进度
},


//css
.loading-overlay {
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
::v-deep .el-progress__text{
  font-size: 24px !important;
  color: rgb(30, 160, 225) !important;
}
::v-deep .el-progress-circle{
  width: 150px !important;
  height: 150px !important;
}
.tips_css{
  font-size: 24px;
  color: rgb(30, 160, 225)
}

2.带查询搜索功能的穿梭框，组件代码如下

<template>
  <div class="compent-dialog-body">
    <div style="padding:20px;">
      <el-row :gutter="8">
        <el-col :span="8">
          <p class="kw_div_p">列表仓库</p>
        </el-col>
        <el-col :span="16">
            <p class="kw_div_p">库位管理</p>
        </el-col>
      </el-row>
      
      <el-row :gutter="24" style="height:100%">
        <el-col :span="8">
          <div class="kw_div">
            <ul class="kw_ul">
              <li v-for="(i,index) in warehouseList" :key="index" class="kw_li" @click="liClick(i,index)" :class="isActive == index?'active_color':''">
                {{i.name}}
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="kw_div">
            <el-row :gutter="8">
              <el-col :span="10">
                <div class="trans_box">
                  <div class="trans_box_top">
                    <span class="trans_box_top_title">
                      <el-checkbox v-model="qbkwQx" @change="qbkwQxF" style="margin-right:10px;"></el-checkbox>全部库位
                    </span>
                    <span class="trans_box_top_tips">{{selectAllKwList.length}}/{{allKwLength}}</span>
                  </div>
                  <div class="trans_box_main">
                    <div class="trans_search">
                      <el-input placeholder="请输入库位查询" prefix-icon="el-icon-search" v-model="allSearchV" class="trans_search_input" @input='inputAll'> </el-input>
                    </div>
                    <div class="trans_list">
                      <template v-for="(i,index) in allKwList">
                        <label class="trans_list_label" :key="index">
                          <el-checkbox v-model="i.isCheck" class="trans_list_checkbox" @change='chooseAll(i)'><span class="trans_list_value">{{i.label}}</span></el-checkbox>
                        </label>
                      </template>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="trans_mid">
                  <el-button icon="el-icon-arrow-left" type="primary" circle class="trans_mid_btn" :disabled='leftDis' @click="goLeft()"></el-button>
                  <el-button icon="el-icon-arrow-right" type="primary" circle class="trans_mid_btn" :disabled='rightDis' @click="goRight()"></el-button>
                </div>
              </el-col>
              <el-col :span="10">
                <div class="trans_box">
                  <div class="trans_box_top">
                    <span class="trans_box_top_title">
                      <el-checkbox v-model="dqkwQx" @change="dqkwQxF" style="margin-right:10px;"></el-checkbox>当前库位
                    </span>
                    <span class="trans_box_top_tips">{{selectNowKwList.length}}/{{nowKwLength}}</span>
                  </div>
                  <div class="trans_box_main">
                    <div class="trans_search">
                      <el-input placeholder="请输入库位查询" prefix-icon="el-icon-search" v-model="nowSearchV" class="trans_search_input" @input='inputNow'> </el-input>
                    </div>
                    <div class="trans_list">
                      <template v-for="(i,index) in nowKwList">
                        <label class="trans_list_label" :key="index">
                          <el-checkbox v-model="i.isCheck" class="trans_list_checkbox" @change='chooseNow(i)'><span class="trans_list_value">{{i.label}}</span></el-checkbox>
                        </label>
                      </template>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="el-dialog__footer">
      <el-button size="mini" @click="close">取消</el-button>
      <el-button size="mini" type="primary" @click="submit">确认</el-button>
    </div>
  </div>

</template>

<script>
  import * as wmsGoodsPosMsts from '@/api/wmsGoodsPosMsts'//请求api
  import * as wmsGoodsAreaPosTbls from '@/api/wmsGoodsAreaPosTbls'//请求api
  import waves from '@/directive/waves' // 水波纹指令
  export default {
    name: 'storageLocation',
    components: {
      // Pagination
    },
    directives: {
      waves
    },
    props: ['shooseData',],
    data() {
      return {
        allSearchV:'',//全部库位搜索
        nowSearchV:'',//当前库位搜索
        checkAllList:[],//多选选中
        allKwList:[],//全部库位列表
        selectAllKwList:[],//选择全部库位数据
        nowKwList:[],//当前库位列表
        selectNowKwList:[],//当前库位数据
        leftDis:true,//左按钮状态
        rightDis:true,//右按钮状态
        beginAllKwList:[],//纪录初始库位
        beginNowKwList:[],//纪录初始库位
        qbkwQx:false,//全部库位全选
        dqkwQx:false,//当前库位全选


        multipleSelection: [], // 列表checkbox选中的值
        currentRoleId: this.roleId,
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: { // 查询条件
          page: 1,
          limit: 20,
          key: '',
          stockCode:'',
          goodsAreaCode: ''
        },
        
        goodsareaDatas:[],
        goodsareaDatasBase:[],
        isActive:0,
        warehouseList: [],//仓库列表
        allKwLength:0,
        nowKwLength:0,
      }
    },

    created() {
      this.listQuery.stockCode = this.shooseData.stockCode
      this.listQuery.goodsAreaCode = this.shooseData.goodsAreaCode
      this.getWarehouseList();//获取仓库列表
      this.getUserLocation();//获取用户库位
    },
    mounted() {
      
    },
    methods: {
      //全部库位全选
      qbkwQxF(val){
        if(val){
          for (let i = 0; i < this.allKwList.length; i++) {
            this.allKwList[i].isCheck = true
          }
          this.selectAllKwList = this.allKwList
        }else{
          for (let i = 0; i < this.allKwList.length; i++) {
            this.allKwList[i].isCheck = false
          }
          this.selectAllKwList = []
        }
      },
      // 当前库位全选
      dqkwQxF(val){
        if(val){
          for (let i = 0; i < this.nowKwList.length; i++) {
            this.nowKwList[i].isCheck = true
          }
          this.selectNowKwList = this.nowKwList
        }else{
          for (let i = 0; i < this.nowKwList.length; i++) {
            this.nowKwList[i].isCheck = false
          }
          this.selectNowKwList = []
        }
      },
      //全部库位列表搜索
      inputAll(value){
        this.allKwList = this.beginAllKwList
        var t = []
        if(value != '' && value != null && value != undefined ){
          var reg = new RegExp(value)
          for (let i = 0; i < this.allKwList.length; i++) {
            if(reg.test(this.allKwList[i].name)){
              t.push(this.allKwList[i])
            }
          }
          this.allKwList = t
        }
        
        //全部库位删除选择数据
        this.allKwList = this.allKwList.filter(item => !this.nowKwList.some(ele=>ele.goodsPosCode===item.goodsPosCode));
        this.selectAllKwList = []//清空选择
        this.allKwList.forEach(i=>{i.isCheck = false})//清空选择状态
        this.qbkwQx = false//重置全选
        this.allKwLength = this.allKwList.length//重新统计数量
      },
      //当前库位列表搜索
      inputNow(value){
        this.nowKwList = this.beginNowKwList
        var t = []
        if(value != '' && value != null && value != undefined ){
          var reg = new RegExp(value)
          for (let i = 0; i < this.nowKwList.length; i++) {
            if(reg.test(this.nowKwList[i].name)){
              t.push(this.nowKwList[i])
            }
          }
          this.nowKwList = t
        }
        //当前库位删除选择数据
        this.nowKwList = this.nowKwList.filter(item => !this.allKwList.some(ele=>ele.goodsPosCode===item.goodsPosCode));
        this.selectNowKwList = []//清空选择
        this.nowKwList.forEach(i=>{i.isCheck = false})//清空选择状态
        this.dqkwQx = false//重置全选
        this.nowKwLength = this.nowKwList.length//重新统计数量
      },
      //全部库位列表选择
      chooseAll(row){
        this.selectAllKwList = []
        // 改变选择状态
        for (let i = 0; i < this.allKwList.length; i++) {
          if(this.allKwList[i].goodsPosCode == row.goodsPosCode){
            this.allKwList[i].isCheck = row.isCheck
          }
        }
        // 选中数据赋值
        for (let i = 0; i < this.allKwList.length; i++) {
          if(this.allKwList[i].isCheck){
            this.selectAllKwList.push(this.allKwList[i])
          }
        }
        
        var s= 0
        // 改变全选状态
        for (let i = 0; i < this.allKwList.length; i++) {
          if(!this.allKwList[i].isCheck){
            this.qbkwQx = false
          }else{
            s +=1
          }
        }
        if(s == this.allKwList.length){
          this.qbkwQx = true
        }
      },
      //当前库位列表选择
      chooseNow(row){
        this.selectNowKwList = []
        // 改变选择状态
        for (let i = 0; i < this.nowKwList.length; i++) {
          if(this.nowKwList[i].goodsPosCode == row.goodsPosCode){
            this.nowKwList[i].isCheck = row.isCheck
          }
        }
        // 选中数据赋值
        for (let i = 0; i < this.nowKwList.length; i++) {
          if(this.nowKwList[i].isCheck){
            this.selectNowKwList.push(this.nowKwList[i])
          }
        }

        var s= 0
        // 改变全选状态
        for (let i = 0; i < this.nowKwList.length; i++) {
          if(!this.nowKwList[i].isCheck){
            this.dqkwQx = false
          }else{
            s +=1
          }
        }
        if(s == this.nowKwList.length){
          this.dqkwQx = true
        }
      },
      //当前库位删除- 向全部库位添加
      goLeft(){
        //重置选择
        for (let i = 0; i < this.selectNowKwList.length; i++) {
          this.selectNowKwList[i].isCheck = false
        }
        this.nowKwList.forEach(item =>{
          item.isCheck = false
        })
        //全部库位添加数据
        this.allKwList = this.allKwList.concat(this.selectNowKwList)
        this.beginAllKwList = this.allKwList
        //当前库位删除选择数据
        this.nowKwList = this.nowKwList.filter(item => !this.allKwList.some(ele=>ele.goodsPosCode===item.goodsPosCode));
        this.selectNowKwList=[]
        this.dqkwQx = false
        this.allKwLength = this.allKwList.length
        this.nowKwLength = this.nowKwList.length
      },
      //全部库位删除- 向当前库位添加
      goRight(){
        //重置选择
        for (let i = 0; i < this.selectAllKwList.length; i++) {
          this.selectAllKwList[i].isCheck = false
        }
        this.allKwList.forEach(item =>{
          item.isCheck = false
        })
        //赋值
        this.nowKwList = this.nowKwList.concat(this.selectAllKwList)
        this.beginNowKwList = this.nowKwList

        
        //全部库位删除选择数据
        this.allKwList = this.allKwList.filter(item => !this.nowKwList.some(ele=>ele.goodsPosCode===item.goodsPosCode));

        this.selectAllKwList =[]
        this.qbkwQx = false
        this.allKwLength = this.allKwList.length
        this.nowKwLength = this.nowKwList.length
      },
      //获取仓库列表
      getWarehouseList(){
          this.warehouseList = JSON.parse(JSON.stringify(this.$store.state.stockDatas))
          var t = {
            name:'全部仓库',
            stockCode:'allStockCode'
          }
          this.warehouseList.unshift(t)
      }, 
      //获取用户库位
      getUserLocation(){
        var tdata={
          goodsAreaCode:this.listQuery.goodsAreaCode,
          // key:this.listQuery.key
        }
        this.$store.commit("updataListLoading",true)
        // 请求自己的数据
        wmsGoodsAreaPosTbls.searchPosByArea(tdata).then((res) => {
          var tdata = res.result
          for (let i = 0; i < tdata.length; i++) {
            for (let j = 0; j < this.warehouseList.length; j++) {
              if(tdata[i].stockCode){
                if(this.warehouseList[j].stockCode == tdata[i].stockCode){
                  tdata[i].label = tdata[i].name + ' - ' + this.warehouseList[j].name;
                }
              }else{
                tdata[i].label = tdata[i].name
              }
            }
          }
          this.nowKwList = tdata
          this.beginNowKwList = tdata
          this.getAllKwList();

          this.nowKwLength = this.nowKwList.length
          this.$store.commit("updataListLoading",false)
        }).catch(() => {
          this.$store.commit("updataListLoading",false)
        })
      },
      //获取所有库位
      getAllKwList(){
        // 请求自己的数据
        wmsGoodsPosMsts.searchAllPos().then((res) => {
          // 数据处理
          var tdata = res.result
          for (let i = 0; i < tdata.length; i++) {
            tdata[i].isCheck = false
            for (let j = 0; j < this.warehouseList.length; j++) {
              if(this.warehouseList[j].stockCode == tdata[i].stockCode){
                tdata[i].label = tdata[i].name + ' - ' + this.warehouseList[j].name;
              }
            }
          }
          
          // 所有库位删除当前库位
          this.allKwList = tdata.filter(item => !this.nowKwList.some(ele=>ele.goodsPosCode===item.goodsPosCode));

          // 缓存全部库位
          this.beginAllKwList = this.allKwList
          this.allKwLength = this.allKwList.length
        }).catch(() => {
          // this.warehouseList = []
        })
      },
      //点击行改变状态，从全部库位中筛选
      liClick(row,index){
        var tdata={}
        if(row.stockCode == 'allStockCode'){
          this.getAllKwList()
        }else{
          tdata={
            stockCode:row.stockCode
          }
          // 请求自己的数据
          wmsGoodsPosMsts.LoadForstockCode(tdata).then((res) => {
            // 数据处理
            var tdata = res.result
            for (let i = 0; i < tdata.length; i++) {
              tdata[i].isCheck = false
              for (let j = 0; j < this.warehouseList.length; j++) {
                if(this.warehouseList[j].stockCode == tdata[i].stockCode){
                  tdata[i].label = tdata[i].name + ' - ' + this.warehouseList[j].name;
                }
              }
            }
            // 所有库位删除当前库位
            this.allKwList = tdata.filter(item => !this.nowKwList.some(ele=>ele.goodsPosCode===item.goodsPosCode));

            // 缓存全部库位
            this.beginAllKwList = this.allKwList
            this.selectAllKwList = []//切换时清空选择列表
          })
        }
        this.isActive = index
      },
      close() {
        this.$emit('close')
      },
      submit() {
        var subList = this.nowKwList
        for (let i = 0; i < subList.length; i++) {
          subList[i].goodsAreaCode = this.shooseData.goodsAreaCode
        }

        if(subList.length <= 0){
          subList = [{goodsAreaCode:this.shooseData.goodsAreaCode}]
        }
        this.$store.commit("updataListLoading",true)
        // 请求自己的数据
        wmsGoodsAreaPosTbls.saveareapos(subList).then((res) => {
          this.$emit('close')
          this.$message.success(res.message)
          this.$store.commit("updataListLoading",false)
        }).catch(() => {
          this.$message.error('操作失败，请重试')
          this.$store.commit("updataListLoading",false)
        })
      },
      
    },
    watch:{
      //当前库位选择数据变换
      'selectNowKwList'(val){
        if(val.length>0){
          this.leftDis = false
        }else{
          this.leftDis = true
        }
      },
      //全部库位选择数据变换
      'selectAllKwList'(val){
        if(val.length>0){
          this.rightDis  = false
        }else{
          this.rightDis  = true
        }
      },
    }
  }

</script>
<style  lang="scss" scoped>
.trans_box{
  width: 100%;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  box-sizing: border-box;
  position: relative;
  .trans_box_top{
    height: 40px;
    line-height: 40px;
    background: #f5f7fa;
    margin: 0;
    padding-left: 15px;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
    color: #000;
    .trans_box_top_title{
      font-size: 16px;
      color: #303133;
      font-weight: 400
    }
    .trans_box_top_tips{
      position: absolute;
      right: 15px;
      color: #909399;
      font-size: 12px;
      font-weight: 400;
    }
  }
  .trans_box_main{
    .trans_search{
      text-align: center;
      margin: 15px;
      box-sizing: border-box;
      display: block;
      width: auto;
    }
    .trans_list{
      height: 400px;
      overflow: hidden;
      overflow-y: scroll;
      .trans_list_label{
        cursor: pointer;
        display: block;
        height: 30px;
        line-height: 30px;
        padding-left: 15px;
        // .trans_list_checkbox{
        //   background-color: #fff;
        //   border: 1px solid #dcdfe6;
        // }
        .trans_list_value{
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          box-sizing: border-box;
          padding-left: 14px;
          line-height: 30px;
          color: #606266;
          font-weight: 500;
          font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif !important;
        }
        
      }
    }
    .trans_list::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
  }
}

.trans_mid{
  margin-top: 200px;
  .trans_mid_btn{
    display: block;
    margin: 20px 0;
  }
}

  .custom-theme .el-transfer-panel__body,.el-transfer-panel__body{
    height: 500px !important;
  }
  .custom-theme .el-transfer-panel__list,.el-transfer-panel__list{
    height: 500px;
  }
  .compent-dialog-body{
    min-height: 500px;
    /* 库位 */
    .kw_div_p{
      margin: 0 0 10px 0px;
      border-left: 3px solid #409eff;
      padding-left: 10px;
    }
    .kw_ul{
      text-decoration: none;
      list-style: none;
      padding: 0;
      margin-top: 0;
      .kw_li{
        height: 30px;
        line-height: 30px;
        padding-left: 20px;
        cursor: pointer;
      }
      .active_color{
        background: #f5f7fa;
      }
    }
  }
  
</style>