- 本次記錄下項目里面遇見的坑括授，如圖所示，這個需求踏拜，這個步驟上一步時我上次發(fā)的將SQL文件傳給后臺碎赢，然后，后臺將SQL文件的字段解析出來速梗，我在這里將其按照圖示操作肮塞，這里主要涉及拖拽，還有一個就是篩選
-
思考：操作數(shù)據(jù)姻锁，讓數(shù)據(jù)在其中流動枕赵，盡量不動dom元素，這里所有操作都是基于對象數(shù)組
篩選.gif - 先說篩選位隶，此處輸入篩選字段拷窜，向后臺發(fā)送請求，得到所有包含篩選字段的對象數(shù)組涧黄，然后將分庫分表篮昧，孤立表，全局表三個格子的數(shù)據(jù)用concat鏈接起來笋妥，將請求的數(shù)據(jù)和格子的數(shù)據(jù)懊昨，做對比，將其一樣的給刪除（此處有個坑）
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);//這是我請求到的數(shù)據(jù)
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方法疚颊，刪除一樣的數(shù)據(jù)狈孔，但是沒注意到信认，
//此處刪除了，_data的數(shù)據(jù)就改變了均抽，不在時原來的數(shù)據(jù)嫁赏，
//造成的后果就是篩選的時候上面會出現(xiàn)你已經(jīng)選過的數(shù)據(jù)，
//造成數(shù)據(jù)越篩選越多油挥，所以這里又做了下面的循環(huán)潦蝇，用第三方避免這種情況
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)
}
}
}
}
})
},
//由于這是臨上線發(fā)現(xiàn)的BUG款熬。所以倉促改的，代碼有些亂攘乒，上線了在進行優(yōu)化一下代碼
- 另外一個就是拖拽了贤牛，比較簡單，但是需要細心则酝，直接上代碼吧殉簸，看了就懂了，這是整個這個頁面的代碼沽讹，我把之前的拆分又給整合了般卑，為了貼上來方便，代碼實際中爽雄，這種頁面還是拆分為模塊比較好
<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">將按照您設置的規(guī)則散列分布在<br/>不同的數(shù)據(jù)庫實例上</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分片上創(chuàng)建</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">在集群下的每一個數(shù)據(jù)庫實例上創(chuàng)建<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: "創(chuàng)建表二",
loading: false,
isShow: true,
dataBaseName: "", //上一步所選數(shù)據(jù)庫名字
tagFilter: "",
predataBase: "", //上一部村的拖拽的標簽數(shù)據(jù)
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} 數(shù)據(jù)庫名字
* @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) {
//獲取設置規(guī)則需要的樹數(shù)據(jù)
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 == "無分表不需要創(chuàng)建工單") {
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: "開始設置規(guī)則",
cancelButtonText: "稍后設置規(guī)則",
type: "success"
})
.then(() => {
//這里跳轉設置規(guī)則頁面
localStorage.setItem("sqlNum", 2);
this.$router.push("/clusterManage/cluster/createRule1");
})
.catch(() => {
//這里跳轉詳情頁面
this.$router.push(
"/clusterManage/cluster/detail/" + this.id
);
});
}
} else {
this.$message.error("表已存在，創(chuàng)建失敗");
this.$router.push("/clusterManage/cluster/detail/" + this.id);
}
})
.catch(res => {
this.$confirm(res.data.resMsg, "失敗", {
// confirmButtonText: '返回修改',
cancelButtonText: "返回修改",
type: "warning"
})
.then(() => {
//這里跳轉設置規(guī)則頁面
})
.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>
+????先寫到這里吧????
