VUE 拖拽筛选

• 本次记录下项目里面遇见的坑，如图所示，这个需求，这个步骤上一步时我上次发的将SQL文件传给后台，然后，后台将SQL文件的字段解析出来，我在这里将其按照图示操作，这里主要涉及拖拽，还有一个就是筛选

• 思考：操作数据，让数据在其中流动，尽量不动dom元素，这里所有操作都是基于对象数组

  
  筛选.gif
• 先说筛选，此处输入筛选字段，向后台发送请求，得到所有包含筛选字段的对象数组，然后将分库分表，孤立表，全局表三个格子的数据用concat链接起来，将请求的数据和格子的数据，做对比，将其一样的给删除（此处有个坑）

 Fiter() {
      let param = {
        sql: localStorage.sql,
        clusterId: this.id,
        databaseName: localStorage.getItem("dataBaseName"),
        condition: this.tagFilter
      };
      console.log(param);
      Api.newRule
        .getDDL(param)
        .then(res => {
          if (res.data.resCode == 10000) {
          // console.log(res.data.data.tableList);
            let dataArr = []
            this.tags = []
            let _data = res.data.data.tableList
            console.log(_data);//这是我请求到的数据
            let arr = []
          
            console.log("分库分表");
             let arr0 = this.guDatas;
              
             console.log("孤立表");
             let arr1 = this.quanDatas;   

              console.log("quanju表");
             let arr2 = this.qiDatas;
             arr =   arr0.concat(arr1).concat(arr2)
           
            console.log(arr)
            for (let i = 0; i < _data.length; i++) {
              console.log(_data[i].name)
              for (let j = 0; j < arr.length; j++) {
                console.log(arr[j].name)        
                if ( _data[i].name == arr[j].name) {
                    // _data.splice(i,1) 
                    //这里是个坑，开始我直接用splice方法，删除一样的数据，但是没注意到，
                    //此处删除了，_data的数据就改变了，不在时原来的数据，
                    //造成的后果就是筛选的时候上面会出现你已经选过的数据，
                    //造成数据越筛选越多，所以这里又做了下面的循环，用第三方避免这种情况
                  dataArr.push(_data[i])     
                }else {
                }
              }
            }
           localStorage.setItem('_dataData',JSON.stringify(_data))
            this.tags = JSON.parse(localStorage._dataData)
            console.log(this.tags)
            for (let i = 0; i < dataArr.length; i++) {
              for (let j = 0; j < this.tags.length; j++) {
               if ( dataArr[i].name == this.tags[j].name) {
                 this.tags.splice(j,1) 
               }
                
              }
              
            }
         
          }
        })
    },
//由于这是临上线发现的BUG。所以仓促改的，代码有些乱，上线了在进行优化一下代码

• 另外一个就是拖拽了，比较简单，但是需要细心，直接上代码吧，看了就懂了，这是整个这个页面的代码，我把之前的拆分又给整合了，为了贴上来方便，代码实际中，这种页面还是拆分为模块比较好

<template>
  <div class="layout-main">
    <m-breadcrumb :data="pathData" :currentPath="currentPath"></m-breadcrumb>
     <div  class="layout-main__hd" @dragenter="dragenter" @dragover.prevent  @drop="dropTag($event)">
       <div :class="[isShow?'someTagBox':'someTagBoxMore']">
         <div class="tagFifter"><el-input type="text" placeholder="输入筛选字段" v-model="tagFilter" @change="changeFilter" size="mini" clearable></el-input width='180px'><el-button @click="Fiter"  size="mini"> 筛选</el-button> 
         <el-button @click="moreTag"  size="mini">更多</el-button></div>
          <el-tag
            class="someTag"
            onselectstart="return false;"
            v-for="tag in tags"
            :key="tag.name"
            ref="tagClick"
            @dragstart.native="dragstart($event, tag)"
            draggable="true"
            
            :type="tag.type">
            {{tag.name}}
          </el-tag> 
         
       </div>
        
     </div>
     <div  class="layout-main__bd">
      <div class="gulibiao"@dragenter="dragenter" @dragover.prevent @drop="drop1($event)"  ref="click1" accessKey="1">
         <div class="gulibiao-tit"><i></i><el-tooltip placement="top">
                      <div slot="content">将按照您设置的规则散列分布在<br/>不同的数据库实例上</div>
                        <el-button type="text" color="#000">分库分表</el-button>
                      </el-tooltip></div>
                          <el-tag 
                            :key="guData.name"  
                            v-for="guData in guDatas"  
                            :type="guData.type"
                           onselectstart="return false;"
                            @dragstart.native="dragstart1($event, guData)"
                            draggable="true"
                          >
                            {{guData.name}}
                          </el-tag></div>


      <div class="quanjubiao" ref="click2" accessKey="2"  @dragover.prevent @drop="drop2($event)">
           <div class="quanjubiao-tit"><i></i><el-tooltip placement="top">
                      <div slot="content"><br/>将在一个集群里且仅在第一个slice分片上创建</div>
                        <el-button type="text" color="#000">孤立表</el-button>
                      </el-tooltip></div>
                            <el-tag 
                              :key="quanData.name"  
                              v-for="quanData in quanDatas"  
                              :type="quanData.type"
                            onselectstart="return false;"
                            @dragstart.native="dragstart2($event, quanData)"
                            draggable="true"
                            >
                              {{quanData.name}}
                            </el-tag> </div>
      <div class="qita"  ref="click3" accessKey="3" @dragover.prevent @drop="drop3($event)">
         <div class="qita-tit"><i></i><el-tooltip placement="top">
                      <div slot="content">在集群下的每一个数据库实例上创建<br/></div>
                        <el-button type="text" color="#000">全局表</el-button>
                      </el-tooltip></div>
                        <el-tag 
                        :key="qiData.name"  
                        v-for="qiData in qiDatas"  
                        :type="qiData.type"
                       onselectstart="return false;"
                         @dragstart.native="dragstart3($event, qiData)"
                        draggable="true"
                      >
                        {{qiData.name}}
                      </el-tag></div>
      <el-button type="primary "style="width:136px;" @click="saveMeta" class="baocunMeta">保存</el-button>                  
     </div>
  </div>
</template>

<script>
import Api from "@/libs/api";
import { mapState } from "vuex";
import Util from "@/libs/util";
export default {
  data() {
    return {
      id: localStorage.getItem("clusterDetailId"),
      pathData: [
        { path: "/clusterManage/cluster", name: "集群列表" },
        { path: "/clusterManage/cluster/detail/"+localStorage.getItem("clusterDetailId"), name: "集群详情" },
        ],
      currentPath: "创建表二",
      loading: false,
      isShow: true,
      dataBaseName: "", //上一步所选数据库名字
      tagFilter: "",
      predataBase: "", //上一部村的拖拽的标签数据
      tmp: "",
      tmp1: "",
      tmp2: "",
      tmp3: "",
      keys: "",
      tags: [],
      guDatas: [], //分库分表
      quanDatas: [], //孤立表
      qiDatas: [], //全员表
      keys: ""
    };
  },
  computed: {
    ...mapState({
      count1: state => state.ddl.dataBaseName,
      count2: state => state.ddl.dataBaseBiaoName
    }),
    updated() {
       this.Fiter();
    },
  },

  methods: {
    //初始化
    loadData() {
      console.log(this.count1);
      console.log(this.count2);
      this.dataBaseName = this.count1;
      // this.tags = this.count2.tableList;
     this.changeFilter()
     
      // this.tags = JSON.parse(localStorage.getItem('dataBaseBiaoName'))
    },
    //筛选字段
    changeFilter() {
      console.log(this.tagFilter);
      if (this.tagFilter == "") {
        this.Fiter();
      }
    },
     Fiter() {
      let param = {
        sql: localStorage.sql,
        clusterId: this.id,
        databaseName: localStorage.getItem("dataBaseName"),
        condition: this.tagFilter
      };
      console.log(param);
          Api.newRule
        .getDDL(param)
        .then(res => {
          if (res.data.resCode == 10000) {
          // console.log(res.data.data.tableList);
            let dataArr = []
            this.tags = []
            let _data = res.data.data.tableList
            console.log(_data);
            let arr = []
          
            console.log("分库分表");
             let arr0 = this.guDatas;
              
             console.log("孤立表");
             let arr1 = this.quanDatas;   

              console.log("quanju表");
             let arr2 = this.qiDatas;
             arr =   arr0.concat(arr1).concat(arr2)
           
              console.log(arr)
            for (let i = 0; i < _data.length; i++) {
              console.log(_data[i].name)
              for (let j = 0; j < arr.length; j++) {
                console.log(arr[j].name)        
                if ( _data[i].name == arr[j].name) {
                  // _data.splice(i,1) 
                  dataArr.push(_data[i])     
                }else {
                }
              }
            }
            
           localStorage.setItem('_dataData',JSON.stringify(_data))
            this.tags = JSON.parse(localStorage._dataData)
            console.log(this.tags)
            for (let i = 0; i < dataArr.length; i++) {
              for (let j = 0; j < this.tags.length; j++) {
               if ( dataArr[i].name == this.tags[j].name) {
                 this.tags.splice(j,1) 
                // delete _data[i];
               }
                
              }
              
            }
         
          }
        })
    },
    /**
     * @description DDLMeta结构保存
     * @param {dataBaseName} 数据库名字
     * @param {clusterId} 集群id
     * @param {sqlId} 集群id
     *  @param {tableType} 表名以及表类型拼成的字符串
     */
    saveMeta() {
      console.log(this.guDatas);
      let arr0 = this.guDatas;
      console.log(this.quanDatas);
      let arr1 = this.quanDatas;
      console.log(this.qiDatas);
      let arr2 = this.qiDatas;

      if (arr0.length == 0 && arr1.length == 0 && arr2.length == 0) {
        this.$message.error("还未选择任何表，请选择需要添加的表");
      } else {
        let str0 = ""; //分库分表
        for (let i = 0; i < arr0.length; i++) {
          str0 += arr0[i].name + `,` + `0` + `,,`;
        }
        console.log(str0);
        let str1 = ""; //孤立表
        for (let i = 0; i < arr1.length; i++) {
          str1 += arr1[i].name + `,` + `1` + `,,`;
        }
        console.log(str1);
        let str2 = ""; //全员表表
        for (let i = 0; i < arr2.length; i++) {
          str2 += arr2[i].name + `,` + `2` + `,,`;
        }
        console.log(str2);
        let str;
        str = str0 + str1 + str2;
        console.log(str.substring(0, str.length - 2));
        let params = {
          dataBaseName: this.dataBaseName,
          tableType: str.substring(0, str.length - 2),
          clusterId: this.id,
          sqlId: this.count2.sqlId
        };
        console.log(params);
        Api.newRule
          .saveMeta(params)
          .then(res => {
            console.log(res);
            if (res.data.resCode == 10000) {
              //获取设置规则需要的树数据
              console.log(res.data.data);
              Api.newRule
                .getSchema1(this.count2.sqlId)
                .then(res => {
                  this.$store.commit("schemaData", res.data.data);
                  localStorage.setItem(
                    "schemaData",
                    JSON.stringify(res.data.data)
                  );
                  console.log(res.data.data);
                  localStorage.setItem("schemaMark", 1);
                })
                .catch(res => {});
              if (res.data.resMsg == "无分表不需要创建工单") {
                this.$alert(res.data.resMsg, "成功", {
                  confirmButtonText: "确定",
                  showClose: false,
                  type: "success",
                  callback: action => {
                    //这里跳转详情页面
                    this.$router.push(
                      "/clusterManage/cluster/detail/" + this.id
                    );
                  }
                });
              } else {
                this.$confirm(res.data.resMsg, "成功", {
                  confirmButtonText: "开始设置规则",
                  cancelButtonText: "稍后设置规则",
                  type: "success"
                })
                  .then(() => {
                    //这里跳转设置规则页面
                    localStorage.setItem("sqlNum", 2);
                    this.$router.push("/clusterManage/cluster/createRule1");
                  })
                  .catch(() => {
                    //这里跳转详情页面
                    this.$router.push(
                      "/clusterManage/cluster/detail/" + this.id
                    );
                  });
              }
            } else {
              this.$message.error("表已存在，创建失败");
              this.$router.push("/clusterManage/cluster/detail/" + this.id);
            }
          })
          .catch(res => {
            this.$confirm(res.data.resMsg, "失败", {
              // confirmButtonText: '返回修改',
              cancelButtonText: "返回修改",
              type: "warning"
            })
              .then(() => {
                //这里跳转设置规则页面
              })
              .catch(() => {
                //这里跳转详情页面
              });
          });
      }
    },
    dragstart(event, tag) {
      console.log(111);
      console.log(tag);
      console.log("dragstart");
      this.tmp = tag;
    },
    dragstart1(event, guData) {
      console.log(this.$refs.click1.accessKey);
      this.keys = this.$refs.click1.accessKey;
      console.log("dragstart1");
      this.tmp1 = guData;
      console.log(this.tmp1);
    },
    dragstart2(event, quanData) {
      console.log(this.$refs.click2.accessKey);
      this.keys = this.$refs.click2.accessKey;
      console.log("dragstart2");
      this.tmp2 = quanData;
      console.log(this.tmp2);
    },
    dragstart3(event, qiData) {
      console.log(this.$refs.click3.accessKey);
      this.keys = this.$refs.click3.accessKey;
      console.log("dragstart3");
      this.tmp3 = qiData;
      console.log(this.tmp3);
    },
    dragenter() {},
    dragover() {},
    dragend() {
      console.log("end");
      this.guDatas.push(this.tmp);
    },
    drop1(e) {
      console.log('drop1');
      if (this.keys == 2) {
        this.guDatas.push(this.tmp2);
        this.quanDatas.splice(this.quanDatas.indexOf(this.tmp2), 1);
      } else if (this.keys == 3) {
        this.guDatas.push(this.tmp3);
        this.qiDatas.splice(this.qiDatas.indexOf(this.tmp3), 1);
      } else if (this.keys == 1) {
      } else {
        console.log(this.tmp);
        this.guDatas.push(this.tmp);
        this.tags.splice(this.tags.indexOf(this.tmp), 1);
      }
      this.keys = "";
      console.log(this.keys);
      console.log(e.dataTransfer);
     
      console.log('this.tags')
      console.log(this.tags)
      Util.quChong(this.guDatas)
       console.log(this.guDatas);
   
    },
    drop2(e) {
      console.log('drop2');

      if (this.keys == 1) {
        this.quanDatas.push(this.tmp1);
        this.guDatas.splice(this.guDatas.indexOf(this.tmp1), 1);
      } else if (this.keys == 3) {
        this.quanDatas.push(this.tmp3);
        this.qiDatas.splice(this.qiDatas.indexOf(this.tmp3), 1);
      } else if (this.keys == 2) {
      } else {
        this.quanDatas.push(this.tmp);
        this.tags.splice(this.tags.indexOf(this.tmp), 1);
      }
      this.keys = "";
      // console.log(e.dataTransfer);
      // this.quanDatas.push( this.tmp)
      // this.tags.splice(this.tags.indexOf(this.tmp), 1);
      console.log('this.tags')
      console.log(this.tags)
      Util.quChong(this.quanDatas)
       console.log(this.quanDatas);
    },
    drop3(e) {
      console.log('drop3');

      if (this.keys == 1) {
        this.qiDatas.push(this.tmp1);
        this.guDatas.splice(this.guDatas.indexOf(this.tmp1), 1);
      } else if (this.keys == 2) {
        this.qiDatas.push(this.tmp2);
        this.quanDatas.splice(this.quanDatas.indexOf(this.tmp2), 1);
      } else if (this.keys == 3) {
      } else {
        this.qiDatas.push(this.tmp);
        this.tags.splice(this.tags.indexOf(this.tmp), 1);
      }
      console.log(e.dataTransfer);
      this.keys = "";
      console.log('this.tags')
      console.log(this.tags)
       Util.quChong(this.qiDatas)
       console.log(this.qiDatas);
    },
    dropTag(e) {
      console.log('droTag');

      if (this.keys == 1) {
        this.tags.push(this.tmp1);
        // this.qiDatas.push(this.tmp1);
        this.guDatas.splice(this.guDatas.indexOf(this.tmp1), 1);
      } else if (this.keys == 2) {
        this.tags.push(this.tmp2);
        this.quanDatas.splice(this.quanDatas.indexOf(this.tmp2), 1);
      } else if (this.keys == 3) {
        this.tags.push(this.tmp3);
        this.qiDatas.splice(this.qiDatas.indexOf(this.tmp3), 1);
      }
      this.keys = "";
      console.log('this.tags')
      Util.quChong(this.tags)
       console.log(this.tags);

    },
    moreTag() {
      this.isShow = !this.isShow;
    }
  },

  created() {
    this.predataBase = JSON.parse(localStorage.getItem("dataBaseBiaoName"));
    this.loadData();
  }
};
</script>

<style lang='scss'>
.someTagBox {
  height: 105px;
  overflow: hidden;
}

.someTag {
  margin-right: 5px;
  margin-top: 5px;
}
.tagFifter {
  .el-input {
    width: 200px;
    margin-right: 10px;
  }
}
.layout-main__bd {
  overflow: hidden;
  .baocunMeta {
    margin-top: 20px;
    margin-left: 2.5%;
  }
  .gulibiao {
    float: left;
    padding: 0 5px;
    margin-left: 2.5%;
    width: 30%;
    height: 400px;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
    border: 1px solid #3399ff;
    .gulibiao-tit {
      border-bottom: 1px solid #eee;
      margin-bottom: 5px;
      .el-button {
        color: #000;
      }
    }
  }
  .quanjubiao {
    float: left;
    padding: 0 5px;
    width: 30%;
    height: 400px;
    margin-left: 2.5%;
    margin-right: 2.5%;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
    border: 1px solid #3399ff;
    .quanjubiao-tit {
      border-bottom: 1px solid #eee;
      margin-bottom: 5px;
      .el-button {
        color: #000;
      }
    }
  }
  .qita {
    float: left;
    width: 30%;
    padding: 0 5px;
    margin-right: 2.5%;
    height: 400px;
    box-sizing: border-box;
    border: 1px solid #3399ff;
    box-shadow: 0 0 10px #ccc;
    .qita-tit {
      border-bottom: 1px solid #eee;
      margin-bottom: 5px;
      .el-button {
        color: #000;
      }
    }
  }
}
</style>

+😂😂先写到这里吧😂😂