187 lines
4.3 KiB
Vue
187 lines
4.3 KiB
Vue
<template>
|
|
<!-- <div> -->
|
|
<!-- <el-form :inline="true" :model="form" class="demo-form-inline"> -->
|
|
<!-- <el-form-item label="组织机构名称:" prop="valueTitle" :rules="{ required: true, message: '物业公司名称不能为空', trigger: 'blur' }"> -->
|
|
<el-select
|
|
ref="selectTree1"
|
|
v-model="form.valueTitle"
|
|
clearable
|
|
@clear="clear('valueTitle','editCheckCode')"
|
|
placeholder="请输入组织机构名称"
|
|
>
|
|
<el-option
|
|
:value="form.editCheckCode"
|
|
:label="form.valueTitle"
|
|
class="options"
|
|
>
|
|
<el-tree
|
|
id="tree-option"
|
|
ref="selectTree"
|
|
:accordion="form.accordion"
|
|
:data="form.options"
|
|
:highlight-current="true"
|
|
:expand-on-click-node="false"
|
|
:default-expanded-keys="form.defaultExpandedKey"
|
|
@node-click="handleNodeClick"
|
|
>
|
|
<span slot-scope="{ node, data }">
|
|
<i
|
|
:class="[data.color != null ? 'ification_col' : '']"
|
|
:style="{ 'background-color': data.color }"
|
|
></i
|
|
> {{ data.name }}
|
|
</span>
|
|
</el-tree>
|
|
</el-option>
|
|
</el-select>
|
|
<!-- </el-form-item> -->
|
|
<!-- </el-form> -->
|
|
<!-- </div> -->
|
|
</template>
|
|
<script>
|
|
import { deptTree } from "@/api/admin/dept";
|
|
export default {
|
|
props: {
|
|
valueTitle: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
editCheckCode: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
|
|
},
|
|
watch: {
|
|
'valueTitle': {
|
|
handler(Value) {
|
|
// newValue 和 oldValue 是一样的
|
|
// console.log(Value,'++++++++++++++++++');
|
|
this.form.valueTitle=Value
|
|
},
|
|
deep: true
|
|
},
|
|
'editCheckCode': {
|
|
handler(Value) {
|
|
// newValue 和 oldValue 是一样的
|
|
// console.log(Value,'++++++++++++++++++');
|
|
this.form.editCheckCode=Value
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
vh: "",
|
|
IdData: "",
|
|
form: {
|
|
value: "",
|
|
valueTitle: "",
|
|
editCheckCode: "",//选择的id
|
|
accordion: true,
|
|
defaultExpandedKey: [],
|
|
//区域
|
|
options: [],
|
|
default: {
|
|
value: "id",
|
|
children: "children",
|
|
label: "name",
|
|
},
|
|
},
|
|
|
|
};
|
|
},
|
|
created() {
|
|
// this.form.valueTitle = JSON.parse(
|
|
// window.sessionStorage.getItem("Info")
|
|
// ).deptName;
|
|
this.area();
|
|
},
|
|
beforeMount(){
|
|
// this.form.valueTitle=this.valueTitle
|
|
// this.form.editCheckCode=this.editCheckCode
|
|
},
|
|
mounted() {
|
|
|
|
this.form.valueTitle=this.valueTitle
|
|
this.form.editCheckCode=this.editCheckCode
|
|
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
clear(key,key1) {
|
|
this.form[key] = ''
|
|
this.form[key1] = ''
|
|
this.$emit("clear", key,key1);
|
|
},
|
|
//区域
|
|
area() {
|
|
deptTree().then((res) => {
|
|
if (res.code == "A0000") {
|
|
this.form.options = res.data;
|
|
//this.$emit("click", res.data[0]);
|
|
}
|
|
// debugger
|
|
this.IdData = this.form.options[0].children[0].id;
|
|
this.$emit("sendMessage", this.IdData);
|
|
|
|
//用于子组件向父组件传递部门id非code
|
|
});
|
|
},
|
|
// 切换选项
|
|
handleNodeClick(data) {
|
|
this.form.editCheckCode = data.id;
|
|
this.form.valueTitle = data.name;
|
|
|
|
this.form.defaultExpandedKey = [];
|
|
this.$emit("click", data);
|
|
this.$refs.selectTree1.blur();
|
|
|
|
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
@import url("../../../../styles/comStyle.less");
|
|
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
|
|
height: auto;
|
|
// max-height: 1000px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.el-select-dropdown__item.selected {
|
|
font-weight: normal;
|
|
}
|
|
|
|
ul li > .el-tree .el-tree-node__content {
|
|
height: auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.el-tree-node__label {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.el-tree > .is-current .el-tree-node__label {
|
|
font-weight: 700;
|
|
color: #409eff;
|
|
}
|
|
|
|
.el-tree > .is-current .el-tree-node__children .el-tree-node__label {
|
|
font-weight: normal;
|
|
color: #606266;
|
|
}
|
|
|
|
.el-popper {
|
|
z-index: 9999;
|
|
}
|
|
.ification_col {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 10px;
|
|
}
|
|
</style>
|