parent
6645e98de9
commit
6328052a3a
@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div class="search-box">
|
||||
<div class="select-search">
|
||||
<el-select
|
||||
v-model="queryParmas.color"
|
||||
placeholder="分色"
|
||||
clearable
|
||||
multiple
|
||||
collapse-tags
|
||||
:popper-append-to-body="false"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in dict.type.b_color_type"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="queryParmas.parentid"
|
||||
placeholder="网格"
|
||||
clearable
|
||||
:popper-append-to-body="false"
|
||||
@change="handleNetwork"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in networkOption"
|
||||
:key="dict.dept_id"
|
||||
:label="dict.dept_name"
|
||||
:value="dict.dept_id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<el-checkbox-group v-model="checkList" @change="change">
|
||||
<el-checkbox
|
||||
:label="item.label"
|
||||
v-for="(item, index) in multipleList"
|
||||
:key="index"
|
||||
:disabled="filterDisabled(item.label)"
|
||||
></el-checkbox>
|
||||
<!-- disabled -->
|
||||
</el-checkbox-group>
|
||||
<el-checkbox label="三维图层" @change="handleMapLayer"></el-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getNetWorkId } from "@/api/home/index.js";
|
||||
import { mapGetters } from "vuex";
|
||||
export default {
|
||||
dicts: ["b_color_type"],
|
||||
computed: {
|
||||
...mapGetters(["mapParmas", "queryParamsXiaoqu"]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkList: [],
|
||||
networkOption: [],
|
||||
multipleList: [
|
||||
{ key: "type", label: "户籍", value: 1 },
|
||||
{ key: "type", label: "流动", value: 2 },
|
||||
{ key: "isd", label: "中共党员", value: 1 },
|
||||
{ key: "isk", label: "帮扶对象", value: 1 },
|
||||
{ key: "isx", label: "重点人群", value: 1 },
|
||||
{ key: "isj", label: "退伍军人", value: 1 },
|
||||
],
|
||||
queryParmas: {
|
||||
parentid: undefined,
|
||||
color: undefined,
|
||||
type: undefined,
|
||||
isd: undefined,
|
||||
isk: undefined,
|
||||
isx: undefined,
|
||||
isj: undefined,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getNetworkList();
|
||||
},
|
||||
methods: {
|
||||
async getNetworkList() {
|
||||
let res = await getNetWorkId({
|
||||
xiaoquId: this.queryParamsXiaoqu.xiaoquId,
|
||||
});
|
||||
|
||||
this.networkOption = res.data["网格list"];
|
||||
},
|
||||
handleNetwork(e) {
|
||||
let networkName = "";
|
||||
if (e) {
|
||||
networkName = this.networkOption.filter((item) => item.dept_id == e)[0]
|
||||
.dept_name;
|
||||
console.log(networkName);
|
||||
}
|
||||
|
||||
this.$store.commit("CHANGE_QUERY_MAP", { networkName: networkName });
|
||||
},
|
||||
handleMapLayer(e) {
|
||||
this.$store.commit("CHANGE_QUERY_MAP", { sd: e });
|
||||
},
|
||||
change(e) {
|
||||
this.reset();
|
||||
e.map((item) => {
|
||||
let itemData = this.multipleList.filter((it) => it.label == item)[0];
|
||||
this.queryParmas[itemData.key] = itemData.value;
|
||||
});
|
||||
},
|
||||
filterDisabled(label) {
|
||||
if (label == "户籍" || label == "流动") {
|
||||
let letisTrue = this.checkList.some((item) => {
|
||||
let text = label == "户籍" ? "流动" : "户籍";
|
||||
return item == text;
|
||||
});
|
||||
return letisTrue;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.queryParmas.type = undefined;
|
||||
this.queryParmas.isd = undefined;
|
||||
this.queryParmas.isk = undefined;
|
||||
this.queryParmas.isx = undefined;
|
||||
this.queryParmas.isj = undefined;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-box {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
left: 400px;
|
||||
top: 115px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
::v-deep .el-checkbox {
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
color: #cdfbff;
|
||||
background: url("~@/assets/images/ui/btn_bg.png");
|
||||
background-size: 100% 100%;
|
||||
padding: 9px 15px 10px 15px;
|
||||
.el-checkbox__label {
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
|
||||
color: #cdfbff;
|
||||
}
|
||||
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background: #fff;
|
||||
}
|
||||
::v-deep .el-checkbox__inner::after {
|
||||
border-color: #16aa2d;
|
||||
}
|
||||
|
||||
::v-deep .select-search {
|
||||
.el-select {
|
||||
width: 130px;
|
||||
.el-input {
|
||||
background: transparent;
|
||||
}
|
||||
.el-input__inner {
|
||||
height: 38px;
|
||||
line-height: 30px;
|
||||
color: #fff;
|
||||
background: url("~@/assets/images/ui/img_btn_search.png");
|
||||
background-size: 100% 100%;
|
||||
border: 0px !important;
|
||||
}
|
||||
.el-input__inner::placeholder,
|
||||
.el-select__caret {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-select__tags {
|
||||
padding-left: 6px;
|
||||
.el-tag--small {
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue