提交 9b42502d 编写于 作者: tony001's avatar tony001

Update app-org-select.vue

上级 57f5a31c
<template> <template>
<div class="app-org-select"> <div class="app-org-select">
<ibiz-select-tree :NodesData="NodesData" v-model="selectTreeValue" :multiple="true"></ibiz-select-tree> <ibiz-select-tree :NodesData="NodesData" v-model="selectTreeValue" :multiple="false" @select="treeSelectChange"></ibiz-select-tree>
</div> </div>
</template> </template>
<script lang = 'ts'> <script lang = 'ts'>
import { Vue, Component, Prop } from "vue-property-decorator"; import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { Http } from '@/utils';
@Component({}) @Component({})
export default class AppOrgSelect extends Vue { export default class AppOrgSelect extends Vue {
/**
* 表单数据
*
* @memberof AppOrgSelect
*/
@Prop() public data!:any;
/**
* 上下文
*
* @memberof AppOrgSelect
*/
@Prop() public context!:any;
/** /**
* 填充对象 * 填充对象
* *
...@@ -23,19 +37,65 @@ export default class AppOrgSelect extends Vue { ...@@ -23,19 +37,65 @@ export default class AppOrgSelect extends Vue {
*/ */
@Prop() public filter?:string; @Prop() public filter?:string;
/**
* 是否多选
*
* @memberof AppOrgSelect
*/
@Prop({default:false}) public multiple?:boolean;
/**
* 监听表单数据变化
*
* @memberof AppOrgSelect
*/
@Watch('data',{immediate:true,deep:true})
onDataChange(newVal: any, oldVal: any) {
// 计算出选中值
// 单选
if(!this.multiple){
if(this.fillMap && Object.keys(this.fillMap).length >0){
let templateValue = {};
Object.keys(this.fillMap).forEach((item:any) =>{
if(this.data && this.data[this.fillMap[item]]){
Object.assign(templateValue,{[item]:this.data[this.fillMap[item]]});
}
})
this.selectTreeValue = JSON.stringify([templateValue]);
}
}else{
// 多选
}
}
/**
* 查询单位路径
*
* @memberof AppOrgSelect
*/
public orgDataUrl:string ="/ibzorganizations/${orgid}/suborg/picker";
/** /**
* 选择值 * 选择值
* *
* @memberof AppOrgSelect * @memberof AppOrgSelect
*/ */
public selectTreeValue:any; public selectTreeValue:any = "";
/**
* 树节点数据
*
* @memberof AppOrgSelect
*/
public NodesData:any = [];
/** /**
* 树数据 * 过滤值
* *
* @memberof AppOrgSelect * @memberof AppOrgSelect
*/ */
public NodesData:any =[{"children":[],"disabled":false,"isLeaf":true,"id":"001","label":"中建材信息技术股份有限公司","code":"001","level":null,"filter":["001"]},{"children":[{"children":[],"disabled":false,"isLeaf":true,"id":"450100","label":"北京","code":"450100","level":4501,"filter":["450000","450100"]},{"children":[],"disabled":false,"isLeaf":true,"id":"450200","label":"上海","code":"450200","level":null,"filter":["450000","450200"]}],"disabled":false,"isLeaf":false,"id":"450000","label":"总部","code":"450000","level":45,"filter":["450000"]},{"children":[],"disabled":false,"isLeaf":true,"id":"002","label":"某某客户公司","code":"002","level":null,"filter":["002"]}]; public filterValue:any;
/** /**
* vue生命周期 * vue生命周期
...@@ -43,8 +103,83 @@ export default class AppOrgSelect extends Vue { ...@@ -43,8 +103,83 @@ export default class AppOrgSelect extends Vue {
* @memberof AppOrgSelect * @memberof AppOrgSelect
*/ */
public created(){ public created(){
console.log(this.fillMap); this.initBasicData();
console.log(this.filter); this.loadTreeData();
}
/**
* 加载树数据
*
* @memberof AppOrgSelect
*/
public initBasicData(){
// 计算出过滤值
if(this.filter){
if(this.data && this.data[this.filter]){
this.filterValue= this.data[this.filter];
}else if(this.context && this.context[this.filter]){
this.filterValue= this.context[this.filter];
}
}
}
/**
* 加载树数据
*
* @memberof AppOrgSelect
*/
public loadTreeData(){
let requestUrl:string = "";
if(!this.filter){
requestUrl = this.orgDataUrl.replace('${orgid}','alls');
}else{
requestUrl = this.orgDataUrl.replace('${orgid}',this.filterValue);
}
Http.getInstance().get(requestUrl).then((res:any) =>{
if(!res.status && res.status !== 200){
console.error("加载数据失败");
return;
}
this.NodesData = res.data;
console.log(this.NodesData);
})
}
/**
* 树选择触发事件
*
* @memberof AppOrgSelect
*/
public treeSelectChange($event:any){
// 多选
if(this.multiple){
}else{
// 单选
if($event){
const tempValue:any = JSON.parse($event)[0];
if(this.fillMap && Object.keys(this.fillMap).length >0){
Object.keys(this.fillMap).forEach((item:any) =>{
this.emitValue(this.fillMap[item],tempValue[item]);
})
}
}else{
if(this.fillMap && Object.keys(this.fillMap).length >0){
Object.keys(this.fillMap).forEach((item:any) =>{
this.emitValue(this.fillMap[item],null);
})
}
}
}
}
/**
* 抛值
*
* @memberof AppOrgSelect
*/
public emitValue(name:string,value:any){
this.$emit('formitemvaluechange',{name:name,value:value});
} }
} }
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册