- 本次记录下项目里面遇见的坑，如图所示，这个需求，这个步骤上一步时我上次发的将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>
+😂😂先写到这里吧😂😂
