Skip to content

S
sample-form-platform
Commit 23cc60fa authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

perf:修改站点选择

parent 52e7a72e
Hide whitespace changes
Inline Side-by-side
Showing with 323 additions and 29 deletions
sample-form-manager-ui/admin/src/pages/layouts/components/HeaderSite copy.vue 0 → 100644
View file @ 23cc60fa
<template>
<el-popover placement="bottom-start" trigger="manual" v-model="visible">
<a slot="reference" class="ant-dropdown-link" @click="visible = true">
{{ siteName }} <i class="el-icon-arrow-down"></i>
</a>
<div class="content" style="min-width: 50vw; min-height: 200px">
<div class="flex_row flex_align_c primary-color name">
<i class="el-icon-location" style="margin-right: 10px"></i>
<span style="">{{ siteName }}</span>
</div>
<div class="site-list">
<span
v-for="(item, index) in sitelist"
:key="index"
:class="{ 'primary-color': item.id == checkid }"
@click="setSite(item)"
>{{ item.label }}</span
>
</div>
<div class="check-site">
<span>您的选择是：</span>
<span
v-for="(item, index) in checkarr"
:key="index"
@click="updataSite(item)"
>{{ index > 0 ? ">" : "" }}{{ item.label }}</span
>
</div>
<div class="site-btn">
<el-button
type="primary"
size="small"
style="margin-right: 10px"
@click="onSucessSite"
:disabled="isSite"
>确定</el-button
>
<el-button size="small" @click="visible = false">取消</el-button>
</div>
</div>
</el-popover>
<!-- <div :trigger="['click']" class="trigger" @click="ontrigger">
<slot>
<a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
{{ siteName }} <i class="el-icon-arrow-down"></i>
</a>
</slot>
<div slot="overlay" class="select-site" v-if="show">
<div class="flex_row flex_align_c primary-color name">
<i class="el-icon-location"></i>
<span style="">{{ siteName }}</span>
</div>
<div class="site-list">
<span
v-for="(item, index) in sitelist"
:key="index"
:class="{ 'primary-color': item.id == checkid }"
@click="setSite(item)"
>{{ item.label }}</span
>
</div>
<div class="check-site">
<span>您的选择是：</span>
<span
v-for="(item, index) in checkarr"
:key="index"
@click="updataSite(item)"
>{{ index > 0 ? ">" : "" }}{{ item.label }}</span
>
</div>
<div class="site-btn">
<el-button
type="primary"
size="small"
style="margin-right: 10px"
@click="onSucessSite"
:disabled="isSite"
>确定</el-button
>
<el-button size="small" @click="show = false">取消</el-button>
</div>
</div>
</div> -->
</template>
<script>
import { getSiteTree } from "@/api/siteInfo";
import local from "@/utils/local";
// import Cookie from "js-cookie";
export default {
data() {
return {
sitelist: [],
visible: false,
offsetLeft: 0,
checkarr: [], //选中站点
checkid: undefined, //最终选中站点
siteName: "请选择站点",
isSite: true,
};
},
computed: {},
created() {
this.getwaitedListdata();
},
mounted() {},
methods: {
// 确认站点
onSucessSite() {
if (this.checkarr.length == 0) return;
let obj = this.checkarr[this.checkarr.length - 1];
this.clickSite(obj);
},
// 选中
setSite(obj) {
this.checkid = undefined;
// 为子节点不添加数据
let data = this.checkarr[this.checkarr.length - 1];
if (data && (data.isLeaf || data.children.length == 0)) {
// 如果为子节点更新最后一个数据
this.checkid = obj.id;
this.checkarr[this.checkarr.length - 1] = obj;
} else {
this.checkarr.push(obj);
if (obj.children && obj.children.length > 0) {
this.sitelist = obj.children;
}
}
if (obj && obj.type == "site") {
this.isSite = false;
} else {
this.isSite = true;
}
},
// 更新选中
updataSite(row) {
const { id } = row;
this.checkid = undefined;
let index = this.checkarr.findIndex((v) => v.id == id);
this.checkarr.length = index + 1;
this.sitelist = row.children;
if (row && row.type == "site") {
this.isSite = false;
} else {
this.isSite = true;
}
// this.getwaitedListdata(id);
},
getwaitedListdata() {
getSiteTree()
.then((res) => {
const { code, data } = res.data;
if (code == 1) {
const { siteTree } = data;
this.sitelist = siteTree;
let arr = [];
const treeFn = function (e) {
e.forEach((element) => {
arr.push(element);
if (element.children && element.children.length > 0) {
treeFn(element.children);
}
});
};
const siteid = local.getLocal("sampleSiteId");
treeFn(siteTree);
const siteObj = arr.find((v) => v.id == siteid);
this.siteName = siteObj ? siteObj.label : "请选择站点";
}
})
.catch((err) => {
console.log(err);
});
},
clickSite(obj) {
// Cookie.set("siteid", obj.id);
// let siteInfo = {
// siteName: obj.label,
// siteid: obj.id,
// };
local.setLocal("sampleSiteId", obj.id);
this.show = false;
if (location.href.search(/token/gi) >= 0) {
setTimeout(() => {
location.reload();
});
} else {
location.reload();
}
},
// ontrigger(e) {
// if (e.target && e.target.nodeName == "A") {
// this.show = !this.show;
// }
// },
},
};
</script>
<style lang="less" scoped>
.ant-dropdown-link {
padding: 0 20px;
font-size: 16px;
min-width: 200px;
display: inline-block;
}
.content {
display: flex;
flex-direction: column;
justify-content: space-around;
.name {
font-size: 20px;
color: #1890ff;
}
.site-list {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
display: flex;
flex-wrap: wrap;
span {
line-height: 1.5;
padding: 10px 20px;
cursor: pointer;
&:hover {
color: #1890ff;
}
}
}
.check-site,
.site-btn {
padding: 0 20px;
}
.check-site {
cursor: pointer;
}
}
.trigger {
display: inline-block;
position: relative;
}
.ant-dropdown-link {
padding: 0 20px;
font-size: 16px;
display: inline-block;
color: #fff;
cursor: pointer;
}
.select-site {
position: fixed;
left: 300px !important;
top: 65px;
background: #fff;
border-radius: 6px;
padding: 10px;
min-width: 60%;
max-width: 80%;
z-index: 9;
color: rgba(0, 0, 0, 0.8);
font-size: 14px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
.name {
font-size: 20px;
}
.site-list {
// padding: 10px 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
overflow: hidden;
span {
float: left;
line-height: 1.5;
padding: 10px 20px;
cursor: pointer;
&:hover {
color: #1890ff;
}
}
}
.check-site,
.site-btn {
padding: 0 20px;
}
}
</style>
sample-form-manager-ui/admin/src/pages/layouts/components/HeaderSite.vue
View file @ 23cc60fa
......@@ -3,7 +3,10 @@
<a slot="reference" class="ant-dropdown-link" @click="visible = true">
{{ siteName }} <i class="el-icon-arrow-down"></i>
</a>
<div class="content" style="min-width: 50vw; min-height: 200px">
<div
class="content"
style="min-width: 60vw; max-width: 80vw; min-height: 200px"
>
<div class="flex_row flex_align_c primary-color name">
<i class="el-icon-location" style="margin-right: 10px"></i>
<span style="">{{ siteName }}</span>
......@@ -27,15 +30,15 @@
>
</div>
<div class="site-btn">
<el-button size="small" @click="visible = false">取消</el-button>
<el-button
type="primary"
size="small"
style="margin-right: 10px"
@click="onSucessSite"
:disabled="isSite"
>确定</el-button
>
<el-button size="small" @click="visible = false">取消</el-button>
</div>
</div>
</el-popover>
......@@ -115,16 +118,22 @@ export default {
this.checkid = undefined;
// 为子节点不添加数据
let data = this.checkarr[this.checkarr.length - 1];
if (data && (data.isLeaf || data.children.length == 0)) {
// 如果为子节点更新最后一个数据
this.checkid = obj.id;
this.checkarr[this.checkarr.length - 1] = obj;
// 如果选中数据有子集更新站点列表
if (obj.children && obj.children.length > 0) {
this.sitelist = obj.children;
}
} else {
this.checkarr.push(obj);
if (obj.children && obj.children.length > 0) {
this.sitelist = obj.children;
}
}
if (obj && obj.type == "site") {
this.isSite = false;
} else {
......@@ -136,8 +145,13 @@ export default {
const { id } = row;
this.checkid = undefined;
let index = this.checkarr.findIndex((v) => v.id == id);
this.checkarr.length = index + 1;
this.sitelist = row.children;
if (index > -1) {
this.checkarr.splice(index + 1, this.checkarr.length - (index + 1));
}
if (row.children && row.children.length > 0) {
this.sitelist = row.children;
}
if (row && row.type == "site") {
this.isSite = false;
......@@ -147,30 +161,27 @@ export default {
// this.getwaitedListdata(id);
},
getwaitedListdata() {
getSiteTree()
.then((res) => {
const { code, data } = res.data;
if (code == 1) {
const { siteTree } = data;
this.sitelist = siteTree;
let arr = [];
const treeFn = function (e) {
e.forEach((element) => {
arr.push(element);
if (element.children && element.children.length > 0) {
treeFn(element.children);
}
});
};
const siteid = local.getLocal("sampleSiteId");
treeFn(siteTree);
const siteObj = arr.find((v) => v.id == siteid);
this.siteName = siteObj ? siteObj.label : "请选择站点";
}
})
.catch((err) => {
console.log(err);
});
getSiteTree().then((res) => {
const { code, data } = res.data;
if (code == 1) {
const { siteTree } = data;
this.sitelist = siteTree;
let arr = [];
const treeFn = function (e) {
e.forEach((element) => {
arr.push(element);
if (element.children && element.children.length > 0) {
treeFn(element.children);
}
});
};
const siteid = local.getLocal("sampleSiteId");
treeFn(siteTree);
const siteObj = arr.find((v) => v.id == siteid);
this.siteName = siteObj ? siteObj.label : "请选择站点";
}
});
},
clickSite(obj) {
// Cookie.set("siteid", obj.id);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment