Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 e23de87c 编写于 作者: tony001's avatar tony001
浏览文件
操作

支持树状代码表

上级 2845dcce
隐藏空白字符变更
内嵌 并排
正在显示 包含 234 行增加 和 24 行删除
src/components/dropdown-list-mpicker/dropdown-list-mpicker.less
浏览文件 @ e23de87c
.ivu-select-multiple .ivu-select-item-selected:after{
display: none;
}
.dropdown-list-mpicker-container{
.tree-dropdown-list-mpicker{
width: 100%;
.el-input__inner{
height: 32px !important;
line-height: 32px !important;
}
.el-input__icon{
line-height: 32px;
}
}
}
src/components/dropdown-list-mpicker/dropdown-list-mpicker.vue
浏览文件 @ e23de87c
<template>
<i-select
class='dropdown-list-mpicker'
multiple
:transfer="true"
transfer-class-name="dropdown-list-mpicker-transfer"
v-model="currentVal"
:disabled="disabled === true ? true : false"
:clearable="true"
:filterable="filterable === true ? true : false"
@on-open-change="onClick"
:placeholder="$t('components.dropDownListMpicker.placeholder')">
<i-option v-for="(item, index) in items" :key="index" :value="item.value.toString()" :label="item.text">
<Checkbox :value = "(currentVal.indexOf(item.value.toString()))==-1?false:true">
{{Object.is(codelistType,'STATIC') ? $t('codelist.'+tag+'.'+item.value) : item.text}}
</Checkbox>
</i-option>
</i-select>
<div class="dropdown-list-mpicker-container">
<i-select
v-if="!hasChildren"
class='dropdown-list-mpicker'
multiple
:transfer="true"
transfer-class-name="dropdown-list-mpicker-transfer"
v-model="currentVal"
:disabled="disabled === true ? true : false"
:clearable="true"
:filterable="filterable === true ? true : false"
@on-open-change="onClick"
:placeholder="$t('components.dropDownListMpicker.placeholder')">
<i-option v-for="(item, index) in items" :key="index" :value="item.value.toString()" :label="item.text">
<Checkbox :value = "(currentVal.indexOf(item.value.toString()))==-1?false:true">
{{Object.is(codelistType,'STATIC') ? $t('codelist.'+tag+'.'+item.value) : item.text}}
</Checkbox>
</i-option>
</i-select>
<ibiz-select-tree v-if="hasChildren" class="tree-dropdown-list-mpicker" :disabled="disabled" :NodesData="items" v-model="currentVal" :multiple="true"></ibiz-select-tree>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Model } from 'vue-property-decorator';
import CodeListService from "@service/app/codelist-service";
import { Util } from '@/utils';
@Component({
})
export default class DropDownListMpicker extends Vue {
......@@ -32,6 +37,13 @@ export default class DropDownListMpicker extends Vue {
*/
public codeListService:CodeListService = new CodeListService({ $store: this.$store });
/**
* 是否有子集
* @type {boolean}
* @memberof DropDownListMpicker
*/
public hasChildren:boolean = false;
/**
* 当前选中值
* @type {any}
......@@ -131,6 +143,14 @@ export default class DropDownListMpicker extends Vue {
* @memberof DropDownListMpicker
*/
set currentVal(val: any) {
if(this.hasChildren && val){
let tempVal:any = JSON.parse(val);
if(tempVal.length >0){
val = tempVal.map((item:any) =>{
return item.value;
})
}
}
const type: string = this.$util.typeOf(val);
val = Object.is(type, 'null') || Object.is(type, 'undefined') ? [] : val;
let value = val.length > 0 ? val.join(this.valueSeparator) : '';
......@@ -143,9 +163,45 @@ export default class DropDownListMpicker extends Vue {
* @memberof DropDownListMpicker
*/
get currentVal() {
if(this.hasChildren){
if(this.itemValue){
let list:Array<any> = [];
let selectedvalueArray:Array<any> = [];
let curSelectedValue:Array<any> = this.itemValue.split(this.valueSeparator);
this.getItemList(list,this.items);
if(curSelectedValue.length > 0){
curSelectedValue.forEach((selectedVal:any) =>{
let tempResult:any = list.find((item:any) =>{
return item.value == selectedVal;
})
selectedvalueArray.push(tempResult);
})
}
return selectedvalueArray.length >0?JSON.stringify(selectedvalueArray):null;
}else{
return null;
}
}
return this.itemValue? this.itemValue.split(this.valueSeparator):[];
}
/**
* 获取代码表列表
*
* @memberof DropDownListMpicker
*/
public getItemList(list:Array<any>,items:Array<any>){
if(items && items.length >0){
items.forEach((item:any) =>{
if(item.children){
this.getItemList(list,item.children);
}
list.push(item);
})
}
}
/**
* 代码表
*
......@@ -186,6 +242,7 @@ export default class DropDownListMpicker extends Vue {
const codelist = this.$store.getters.getCodeList(this.tag);
if (codelist) {
this.items = [...JSON.parse(JSON.stringify(codelist.items))];
this.handleLevelCodeList(Util.deepCopy(this.items));
} else {
console.log(`----${this.tag}----${(this.$t('app.commonWords.codeNotExist') as string)}`);
}
......@@ -198,6 +255,7 @@ export default class DropDownListMpicker extends Vue {
let _param = data.param;
this.codeListService.getItems(this.tag,_context,_param).then((res:any) => {
this.items = res;
this.handleLevelCodeList(Util.deepCopy(this.items));
}).catch((error:any) => {
console.log(`----${this.tag}----${(this.$t('app.commonWords.codeNotExist') as string)}`);
});
......@@ -220,11 +278,57 @@ export default class DropDownListMpicker extends Vue {
let _param = data.param;
this.codeListService.getItems(this.tag,_context,_param).then((res:any) => {
this.items = res;
this.handleLevelCodeList(Util.deepCopy(this.items));
}).catch((error:any) => {
console.log(`----${this.tag}----${(this.$t('app.commonWords.codeNotExist') as string)}`);
});
}
}
/**
* 处理层级代码表
*
* @param {*} items
* @memberof DropDownListMpicker
*/
public handleLevelCodeList(items: Array<any>){
if(items && items.length >0){
this.hasChildren = items.some((item:any) =>{
return item.pvalue;
})
if(this.hasChildren){
let list:Array<any> = [];
items.forEach((codeItem:any) =>{
if(!codeItem.pvalue){
let valueField:string = codeItem.value;
this.setChildCodeItems(valueField,items,codeItem);
list.push(codeItem);
}
})
this.items = list;
}
}
}
/**
* 计算子类代码表
*
* @param {*} items
* @memberof DropDownListMpicker
*/
public setChildCodeItems(pValue:string,result:Array<any>,codeItem:any){
result.forEach((item:any) =>{
if(item.pvalue == pValue){
let valueField:string = item.value;
this.setChildCodeItems(valueField,result,item);
if(!codeItem.children){
codeItem.children = [];
}
codeItem.children.push(item);
}
})
}
}
</script>
......
src/components/dropdown-list/dropdown-list.less
浏览文件 @ e23de87c
.dropdown-list{
display: inline-block;
}
.dropdown-list-container{
.dropdown-list{
display: inline-block;
}
.tree-dropdown-list{
width: 100%;
.el-input__inner{
height: 32px !important;
line-height: 32px !important;
}
.el-input__icon{
line-height: 32px;
}
}
}
\ No newline at end of file
src/components/dropdown-list/dropdown-list.vue
浏览文件 @ e23de87c
<template>
<i-select
<div class="dropdown-list-container">
<i-select v-if="!hasChildren"
class='dropdown-list'
:transfer="true"
v-model="currentVal"
......@@ -9,12 +10,15 @@
@on-open-change="onClick"
:placeholder="$t('components.dropDownList.placeholder')">
<i-option v-for="(item, index) in items" :key="index" :value="item.value">{{($t('codelist.'+tag+'.'+item.value)!== ('codelist.'+tag+'.'+item.value))?$t('codelist.'+tag+'.'+item.value) : item.text}}</i-option>
</i-select>
</i-select>
<ibiz-select-tree v-if="hasChildren" class="tree-dropdown-list" :disabled="disabled" :NodesData="items" v-model="currentVal" :multiple="false"></ibiz-select-tree>
</div>
</template>
<script lang="ts">
import { Vue, Component, Watch, Prop, Model } from 'vue-property-decorator';
import CodeListService from "@service/app/codelist-service";
import { Util } from '@/utils';
@Component({
})
......@@ -42,6 +46,13 @@ export default class DropDownList extends Vue {
*/
public queryParam:any;
/**
* 是否有子集
* @type {boolean}
* @memberof DropDownList
*/
public hasChildren:boolean = false;
/**
* 当前选中值
* @type {any}
......@@ -152,6 +163,10 @@ export default class DropDownList extends Vue {
* @memberof DropDownList
*/
set currentVal(val: any) {
if(this.hasChildren && val){
let tempVal:any = JSON.parse(val);
val = tempVal.length >0?tempVal[0].value:null;
}
const type: string = this.$util.typeOf(val);
val = Object.is(type, 'null') || Object.is(type, 'undefined') ? undefined : val;
this.$emit('change', val);
......@@ -163,9 +178,33 @@ export default class DropDownList extends Vue {
* @memberof DropDownList
*/
get currentVal() {
if(this.hasChildren && this.itemValue){
let list:Array<any> = [];
this.getItemList(list,this.items);
let result:any = list.find((item:any) =>{
return item.value == this.itemValue;
})
return JSON.stringify([result]);
}
return this.itemValue;
}
/**
* 获取代码表列表
*
* @memberof DropDownList
*/
public getItemList(list:Array<any>,items:Array<any>){
if(items && items.length >0){
items.forEach((item:any) =>{
if(item.children){
this.getItemList(list,item.children);
}
list.push(item);
})
}
}
/**
* 代码表
*
......@@ -287,6 +326,51 @@ export default class DropDownList extends Vue {
}catch(error){
console.warn('代码表值类型和属性类型不匹配，自动强制转换异常，请修正代码表值类型和属性类型匹配');
}
this.handleLevelCodeList(Util.deepCopy(this.items));
}
/**
* 处理层级代码表
*
* @param {*} items
* @memberof DropDownList
*/
public handleLevelCodeList(items: Array<any>){
if(items && items.length >0){
this.hasChildren = items.some((item:any) =>{
return item.pvalue;
})
if(this.hasChildren){
let list:Array<any> = [];
items.forEach((codeItem:any) =>{
if(!codeItem.pvalue){
let valueField:string = codeItem.value;
this.setChildCodeItems(valueField,items,codeItem);
list.push(codeItem);
}
})
this.items = list;
}
}
}
/**
* 计算子类代码表
*
* @param {*} items
* @memberof DropDownList
*/
public setChildCodeItems(pValue:string,result:Array<any>,codeItem:any){
result.forEach((item:any) =>{
if(item.pvalue == pValue){
let valueField:string = item.value;
this.setChildCodeItems(valueField,result,item);
if(!codeItem.children){
codeItem.children = [];
}
codeItem.children.push(item);
}
})
}
}
</script>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或