Skip to content

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

重构

上级 53f41421
隐藏空白字符变更
内嵌 并排
正在显示 包含 0 行增加 和 613 行删除
src/components/ibiz-group-picker/ibiz-group-picker.vue 已删除 100644 → 0
浏览文件 @ 53f41421
<template>
<div class="ibiz-group-picker">
<div class="ibiz-group-container">
<div v-if="showTree" class="ibiz-group-tree">
<ibiz-select-tree :NodesData="treeItems" v-model="treeSelectVal" :treeOnly="true" :defaultChecked="true" @select="treeSelect"></ibiz-select-tree>
</div>
<div class="ibiz-group-content">
<ibiz-group-card :data="cardItems" text="label" value="id" groupName="group" :multiple="multiple" :defaultSelect="cardSelctVal" @select="groupSelect"></ibiz-group-card>
</div>
</div>
<div class="ibiz-group-footer">
<el-button size="small" type="primary" @click="onOK">{{$t('components.iBizGroupPicker.ok')}}</el-button>
<el-button size="small" @click="onCancel">{{$t('components.iBizGroupPicker.cancel')}}</el-button>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { Subject } from 'rxjs';
import { Http } from '../../utils';
@Component({})
export default class IBizGroupPicker extends Vue {
/**
* 视图上下文参数
*
* @type {*}
* @memberof IBizGroupPicker
*/
@Prop() viewdata: any;
/**
* 视图参数
*
* @type {*}
* @memberof IBizGroupPicker
*/
@Prop() viewparam: any;
/**
* 多选
*
* @type {*}
* @memberof IBizGroupPicker
*/
protected multiple: boolean = false;
/**
* 加载树url
*
* @type {*}
* @memberof IBizGroupPicker
*/
protected treeurl:any;
/**
* 加载人员url
*
* @type {*}
* @memberof IBizGroupPicker
*/
protected url:any;
/**
* 树数据集
*
* @type {*}
* @memberof IBizGroupPicker
*/
protected treeItems: any[] = [];
/**
* 分组表数据集
*
* @type {*}
* @memberof IBizGroupPicker
*/
protected cardItems: any[] = [];
/**
* 视图上下文参数对象
*
* @type {*}
* @memberof IBizGroupPicker
*/
protected viewData: any;
/**
* 视图参数对象
*
* @type {*}
* @memberof IBizGroupPicker
*/
protected viewParam: any;
/**
* 树选中值
*
* @type {*}
* @memberof IBizGroupPicker
*/
protected treeSelectVal: string = '';
/**
* 分组表选中集合
*
* @type {*}
* @memberof IBizGroupPicker
*/
protected cardSelctVal: any = [];
/**
* 数据选中集合
*
* @type {*}
* @memberof IBizGroupPicker
*/
protected selects: any[] = [];
/**
* 是否显示树
*
* @type {*}
* @memberof IBizGroupPicker
*/
get showTree() {
if(this.viewParam) {
return this.viewParam.showtree;
}
}
/**
* 生命周期
*
* @type {*}
* @memberof IBizGroupPicker
*/
public created() {
if(!this.viewdata || !this.viewparam) {
return;
}
this.viewData = JSON.parse(this.viewdata);
this.viewParam = JSON.parse(this.viewparam);
this.multiple = this.viewParam.multiple;
this.treeurl = this.viewParam.treeurl;
this.url = this.viewParam.url;
if (this.viewParam.selects) {
this.viewParam.selects.forEach((select: any) => {
this.selects.push(select);
this.cardSelctVal.push(select.id)
})
}
this.load();
}
/**
* 加载数据
*
* @type {*}
* @memberof IBizGroupPicker
*/
public load() {
if(this.showTree) {
this.loadTree();
} else {
this.loadGroupData(this.viewParam.filtervalue);
}
}
/**
* 加载树数据
*
* @type {*}
* @memberof IBizGroupPicker
*/
public loadTree() {
let orgid = this.viewParam.filtervalue;
let tempTreeUrl:string = this.treeurl.replace('${orgid}',orgid);
let get = Http.getInstance().get(tempTreeUrl, true);
get.then((response: any) => {
if(response.status === 200) {
this.treeItems = response.data;
}
}).catch((error: any) => {
console.log(error)
})
}
/**
* 加载分组表数据
*
* @type {*}
* @memberof IBizGroupPicker
*/
public loadGroupData(key: string) {
let tempUrl = this.url.replace('${selected-orgid}',key);
let get = Http.getInstance().get(tempUrl, true);
get.then((response: any) => {
if(response.status === 200) {
this.cardItems = response.data;
}
}).catch((error: any) => {
console.log(error)
})
}
/**
* 树选中
*
* @type {*}
* @memberof IBizGroupPicker
*/
public treeSelect(event: any) {
if(!event || JSON.parse(event).length == 0) {
return;
}
const items: any = JSON.parse(event);
this.loadGroupData(items[0].id);
}
/**
* 分组表选中
*
* @type {*}
* @memberof IBizGroupPicker
*/
public groupSelect(event: any) {
if (!event || !event.select) {
return;
}
if(!this.multiple) {
this.selects = [];
}
if(event.rselect) {
let index: number = this.selects.findIndex((item: any) => Object.is(event.rselect, item.id));
if(index >= 0) {
this.selects.splice(index, 1);
}
} else {
event.select.forEach((key: string) => {
let index: number = this.selects.findIndex((item: any) => Object.is(key, item.id));
if(index >= 0) {
return;
}
let item: any = this.cardItems.find((item: any) => Object.is(key, item.id));
if (item) {
this.selects.push(item);
}
});
}
}
/**
* 确认
*
* @type {*}
* @memberof IBizGroupPicker
*/
public onOK() {
this.$emit('close', this.selects);
}
/**
* 取消
*
* @type {*}
* @memberof IBizGroupPicker
*/
public onCancel() {
this.$emit('close');
}
}
</script>
<style lang="less">
.ibiz-group-picker{
width: 100%;
height: 100%;
.ibiz-group-container {
display: flex;
height: calc(100% - 65px);
.ibiz-group-tree {
min-width: 200px;
border-right: 1px solid #ddd;
padding: 0 34px 0 10px;
overflow: auto;
height: 100%;
}
.ibiz-group-content {
flex-grow: 1;
padding: 0 10px;
overflow: auto;
height: 100%;
}
}
.ibiz-group-footer {
padding: 16px;
text-align: right;
border-top: 1px solid #ddd;
}
}
</style>
\ No newline at end of file
src/components/ibiz-group-select/ibiz-group-select.vue 已删除 100644 → 0
浏览文件 @ 53f41421
<template>
<div class="ibiz-group-select">
<div class="ibiz-group-content">
<span v-if="!multiple">
{{ selectName }}
</span>
<template v-else v-for="(select, index) of selects">
<div :key="index" class="ibiz-group-item">
{{ select.label }}
<i v-if="!disabled" class="el-icon-close" @click="remove(select)"></i>
</div>
</template>
</div>
<div v-if="!disabled" class="ibiz-group-open">
<i v-if="!disabled && !multiple && selects.length > 0" class="el-icon-close" @click="remove(selects[0])"></i>
<i class="el-icon-search" @click="openView"></i>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { Subject } from 'rxjs';
@Component({})
export default class IBizGroupSelect extends Vue {
/**
* 名称标识
*
* @type {*}
* @memberof IBizGroupSelect
*/
@Prop() name!: string;
/**
* 树加载地址
*
* @type {*}
* @memberof IBizGroupSelect
*/
@Prop() treeurl?:boolean;
/**
* 数据接口地址
*
* @type {*}
* @memberof IBizGroupSelect
*/
@Prop() url!: string;
/**
* 多选
*
* @type {*}
* @memberof IBizGroupSelect
*/
@Prop({default: false}) multiple?: boolean;
/**
* 数据对象
*
* @type {*}
* @memberof IBizGroupSelect
*/
@Prop() data: any;
/**
* 过滤属性标识
*
* @type {*}
* @memberof IBizGroupSelect
*/
@Prop() filter?: string;
/**
* 是否启用
*
* @type {*}
* @memberof IBizGroupSelect
*/
@Prop() disabled?: boolean;
/**
* 值
*
* @type {*}
* @memberof IBizGroupSelect
*/
@Prop() value: any;
/**
* 上下文参数
*
* @type {*}
* @memberof IBizGroupSelect
*/
@Prop() context: any;
/**
* 关联属性
*
* @type {*}
* @memberof IBizGroupSelect
*/
@Prop() valueitem: any;
/**
* 填充属性
*
* @type {*}
* @memberof IBizGroupSelect
*/
@Prop() fillmap: any;
/**
* 选中项集合
*
* @type {*}
* @memberof IBizGroupSelect
*/
protected selects: any[] = [];
/**
* 值变化
*
* @type {*}
* @memberof IBizGroupSelect
*/
@Watch('value')
onValueChange(newVal: any) {
this.selects = [];
if (newVal) {
let item: any = {};
item.label = newVal.split(',');
if(this.valueitem) {
item.id = this.data[this.valueitem] ? this.data[this.valueitem].split(',') : [];
}
if(this.fillmap) {
for(let key in this.fillmap) {
item[this.fillmap[key]] = this.data[key] ? this.data[key].split(',') : [];
}
}
item.label.forEach((val: string, index: number) => {
let _item: any = {};
for(let key in item) {
_item[key] = item[key][index] ? item[key][index] : null;
}
this.selects.push(_item)
})
}
}
/**
* 单选时选中名称
*
* @type {*}
* @memberof IBizGroupSelect
*/
get selectName() {
if(this.selects.length > 0) {
return this.selects[0].label;
}
}
/**
* 打开选择视图
*
* @type {*}
* @memberof IBizGroupSelect
*/
public openView() {
const view: any = {
viewname: 'ibiz-group-picker',
title: (this.$t('components.iBizGroupSelect.groupSelect') as string)
};
const context: any = JSON.parse(JSON.stringify(this.context));
let filtervalue:string = "";
if(this.filter){
if(this.data[this.filter]){
filtervalue = this.data[this.filter];
}else if(context[this.filter]){
filtervalue = context[this.filter];
}else{
filtervalue = context.srforgid;
}
}else{
filtervalue = context.srforgid;
}
const param: any = {};
Object.assign(param, {
showtree: this.treeurl?true:false,
url:this.url,
treeurl:this.treeurl,
filtervalue: filtervalue,
multiple: this.multiple,
selects: this.selects
});
let container: Subject<any> = this.$appmodal.openModal(view, context, param);
container.subscribe((result: any) => {
if (!result || !Object.is(result.ret, 'OK')) {
return;
}
this.openViewClose(result);
});
}
/**
* 选择视图关闭
*
* @type {*}
* @memberof IBizGroupSelect
*/
public openViewClose(result: any) {
this.selects = [];
if (result.datas && result.datas.length > 0) {
this.selects = result.datas
}
this.setValue()
}
/**
* 数据删除
*
* @type {*}
* @memberof IBizGroupSelect
*/
public remove(item: any) {
this.selects.splice(this.selects.indexOf(item), 1);
this.setValue()
}
/**
* 设置值
*
* @type {*}
* @memberof IBizGroupSelect
*/
public setValue() {
let item: any = {};
item[this.name] = null;
if(this.valueitem) {
item[this.valueitem] = null;
}
if(this.fillmap) {
for(let key in this.fillmap) {
item[key] = null;
}
}
if(this.multiple) {
this.selects.forEach((select: any) => {
item[this.name] = item[this.name] ? `${item[this.name]},${select.label}` : select.label;
if(this.valueitem) {
item[this.valueitem] = item[this.valueitem] ? `${item[this.valueitem]},${select.id}` : select.id;
}
if(this.fillmap) {
for(let key in this.fillmap) {
item[key] = item[key] ? `${item[key]},${select[this.fillmap[key]]}` : select[this.fillmap[key]];
}
}
});
} else {
item = this.selects.length > 0 ? this.selects[0] : {};
item[this.name] = this.selects.length > 0 ? this.selects[0].label : null;
if(this.valueitem) {
item[this.valueitem] = this.selects.length > 0 ? this.selects[0].id : null;
}
if(this.fillmap) {
for(let key in this.fillmap) {
item[key] = this.selects.length > 0 ? this.selects[0][this.fillmap[key]] : null;
}
}
}
for(let key in item) {
this.$emit('formitemvaluechange', { name: key, value: item[key] });
}
}
}
</script>
<style lang="less">
.ibiz-group-select {
width: 100%;
display: flex;
border: 1px solid #DCDFE6;
min-height: 32px;
border-radius: 4px;
.ibiz-group-content {
flex-grow: 1;
padding: 0 16px;
.ibiz-group-item {
display: inline-block;
border: 1px solid #bbb;
line-height: 24px;
border-radius: 5px;
margin-right: 5px;
padding: 0 5px;
}
}
.ibiz-group-open {
display: flex;
text-align: center;
align-items: center;
padding: 0 5px;
}
}
.ibiz-group-select:hover {
border-color: #108cee;
}
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或