Commit d554ea33 authored by 赵啸非's avatar 赵啸非

Merge remote-tracking branch 'origin/master'

parents 8c46951e cd098b39
<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" class="addclass"
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>
</template>
<script>
import session from "@/assets/utils/session.js";
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;
}
},
getwaitedListdata() {
let url =
process.env.VUE_APP_SITETREE_URL == "undefined"
? "http://192.168.0.98:11078/base/site/siteTree"
: process.env.VUE_APP_SITETREE_URL;
this.$get(url).then((res) => {
const { siteTree } = res.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 = session.getSession("siteid");
treeFn(siteTree);
const siteObj = arr.find((v) => v.id == siteid);
this.siteName = siteObj ? siteObj.label : "请选择站点";
});
},
clickSite(obj) {
session.setSession("siteid", obj.id);
this.show = false;
if (location.href.search(/token/gi) >= 0) {
setTimeout(() => {
location.reload();
});
} else {
location.reload();
}
},
},
};
</script>
<style lang="less" scoped>
.ant-dropdown-link {
padding: 0px;
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: 0px;
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>
<template> <template>
<el-popover placement="bottom-start" trigger="manual" v-model="visible"> <div :trigger="['click']" class="trigger" @click="ontrigger">
<a slot="reference" class="ant-dropdown-link" @click="visible = true"> <slot>
{{ siteName }} <i class="el-icon-arrow-down"></i> <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
</a> {{siteName}} <a-icon type="down" />
<div class="content" style="min-width: 50vw; min-height: 200px"> </a>
</slot>
<div
slot="overlay"
class="select-site"
:style="{ left: `${offsetLeft}px` }"
v-if="show"
>
<div class="flex_row flex_align_c primary-color name"> <div class="flex_row flex_align_c primary-color name">
<i class="el-icon-location" style="margin-right: 10px"></i> <a-icon type="environment" style="margin-right: 10px" />
<span style="">{{ siteName }}</span> <span style="">{{siteName}}</span>
</div> </div>
<div class="site-list"> <div class="site-list">
<span <span
...@@ -27,168 +34,166 @@ ...@@ -27,168 +34,166 @@
> >
</div> </div>
<div class="site-btn"> <div class="site-btn">
<el-button <a-button
type="primary" class="addclass" type="primary"
size="small"
style="margin-right: 10px" style="margin-right: 10px"
@click="onSucessSite" @click="onSucessSite"
:disabled="isSite" :disabled="isSite"
>确定</el-button >确定</a-button
> >
<el-button size="small" @click="visible = false">取消</el-button> <a-button @click="show = false">取消</a-button>
</div> </div>
</div> </div>
</el-popover> </div>
</template> </template>
<script> <script>
// import {getsiteTree} from "@/services/default"
// import { mapGetters } from "vuex";
// import Cookie from 'js-cookie'
import session from "@/assets/utils/session.js"; import session from "@/assets/utils/session.js";
export default { export default {
data() { data() {
return { return {
sitelist: [], sitelist: [],
visible: false, show: false,
offsetLeft: 0, offsetLeft: 0,
checkarr: [], //选中站点 checkarr: [], //选中站点
checkid: undefined, //最终选中站点 checkid: undefined, //最终选中站点
siteName: "请选择站点", siteName:"",
isSite: true, isSite:true
}; };
}, },
computed: {}, // computed: {
// ...mapGetters("account", ["user"]),
// },
created() { created() {
this.getwaitedListdata(); this.getwaitedListdata();
}, },
mounted() {}, mounted() {
const { offsetLeft } = this.$el;
this.offsetLeft = offsetLeft;
},
methods: { methods: {
// 确认站点 // 确认站点
onSucessSite() { onSucessSite() {
if (this.checkarr.length == 0) return; if (this.checkarr.length == 0) return;
let obj = this.checkarr[this.checkarr.length - 1]; let obj = this.checkarr[this.checkarr.length - 1];
this.clickSite(obj); this.clickSite(obj);
}, },
// 选中 // 选中
setSite(obj) { setSite(obj) {
this.checkid = undefined; this.checkid = undefined;
// 为子节点不添加数据 // 为子节点不添加数据
let data = this.checkarr[this.checkarr.length - 1]; let data = this.checkarr[this.checkarr.length - 1];
if (data && (data.isLeaf || data.children.length == 0)) { if (data && (data.isLeaf || data.children.length == 0)) {
// 如果为子节点更新最后一个数据 // 如果为子节点更新最后一个数据
this.checkid = obj.id; this.checkid = obj.id;
this.checkarr[this.checkarr.length - 1] = obj; this.checkarr[this.checkarr.length - 1] = obj;
// 如果选中数据有子集更新站点列表
if(obj.children && obj.children.length>0){
this.sitelist = obj.children
}
} else { } else {
this.checkarr.push(obj); this.checkarr.push(obj);
if (obj.children && obj.children.length > 0) { if(obj.children && obj.children.length>0){
this.sitelist = obj.children; this.sitelist = obj.children
} }
} }
if (obj && obj.type == "site") {
this.isSite = false; if(obj && obj.type == "site"){
} else { this.isSite = false
this.isSite = true; }else{
this.isSite = true
} }
}, },
// 更新选中 // 更新选中
updataSite(row) { updataSite(row) {
const { id } = row; const {id} = row
this.checkid = undefined; this.checkid = undefined;
let index = this.checkarr.findIndex((v) => v.id == id); 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 && row.type == "site") { }
this.isSite = false; if(row.children && row.children.length>0){
} else { this.sitelist = row.children
this.isSite = true; }
if(row && row.type == "site"){
this.isSite = false
}else{
this.isSite = true
} }
// this.getwaitedListdata(id);
}, },
getwaitedListdata() { getwaitedListdata() {
let url = let url =
process.env.VUE_APP_SITETREE_URL == "undefined" process.env.VUE_APP_SITETREE_URL == "undefined"
? "http://192.168.0.98:11078/base/site/siteTree" ? "http://192.168.0.98:11078/base/site/siteTree"
: process.env.VUE_APP_SITETREE_URL; : process.env.VUE_APP_SITETREE_URL;
this.$get(url).then((res) => { this.$get(url).then(res=>{
const { siteTree } = res.data; const {code,data} = res.data
this.sitelist = siteTree;
let arr = []; if(code == 1){
const treeFn = function (e) { const {siteTree} = data
e.forEach((element) => { this.sitelist = siteTree
arr.push(element); let arr = []
if (element.children && element.children.length > 0) { const treeFn = function(e){
treeFn(element.children); e.forEach(element => {
} arr.push(element)
}); if(element.children && element.children.length>0){
}; treeFn(element.children)
const siteid = session.getSession("siteid"); }
treeFn(siteTree); });
const siteObj = arr.find((v) => v.id == siteid); }
this.siteName = siteObj ? siteObj.label : "请选择站点"; // const siteid = Cookie.get('siteid')
}); const siteid = session.getSession("siteid");
treeFn(siteTree)
const siteObj = arr.find(v=>v.id == siteid)
this.siteName = siteObj?siteObj.label:"请选择站点"
}
})
}, },
clickSite(obj) { clickSite(obj) {
// Cookie.set('siteid', obj.id)
session.setSession("siteid", obj.id); session.setSession("siteid", obj.id);
this.show = false; this.show = false
if (location.href.search(/token/gi) >= 0) { if(location.href.search(/token/ig) >= 0){
this.$router.push({path:'/resource/advimg'})
setTimeout(() => { setTimeout(() => {
location.reload(); location.reload()
}); });
} else { }else{
location.reload(); location.reload()
}
},
ontrigger(e) {
if (e.target && e.target.nodeName == "A") {
this.show = !this.show;
} }
}, },
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.ant-dropdown-link {
padding: 0px;
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 { .trigger {
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
.ant-dropdown-link { .ant-dropdown-link {
padding: 0px; color: #fff;
padding: 0 20px;
font-size: 16px; font-size: 16px;
min-width: 200px;
display: inline-block; display: inline-block;
color: #fff;
cursor: pointer;
} }
.select-site { .select-site {
position: fixed; position: fixed;
left: 300px !important; left: 0;
top: 65px; top: 65px;
background: #fff; background: #fff;
border-radius: 6px; border-radius: 6px;
...@@ -211,6 +216,7 @@ export default { ...@@ -211,6 +216,7 @@ export default {
float: left; float: left;
line-height: 1.5; line-height: 1.5;
padding: 10px 20px; padding: 10px 20px;
display: inline-block;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #1890ff; color: #1890ff;
......
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