提交 d6678785 编写于 作者: zhujiamin's avatar zhujiamin

人员选择器 部门

上级 97cadebe
...@@ -148,5 +148,7 @@ export const AppComponents = { ...@@ -148,5 +148,7 @@ export const AppComponents = {
v.component('app-select-tree-list',() => import('@/components/app-select-tree-list/app-select-tree-list.vue')); v.component('app-select-tree-list',() => import('@/components/app-select-tree-list/app-select-tree-list.vue'));
// 上下文菜单 // 上下文菜单
v.component('app-mob-context-menu',() => import('@/components/app-mob-context-menu/app-mob-context-menu.vue')); v.component('app-mob-context-menu',() => import('@/components/app-mob-context-menu/app-mob-context-menu.vue'));
// 人员部门选择器
v.component('app-mob-department-personnel',() => import('@/components/app-mob-department-personnel/app-mob-department-personnel.vue'));
}, },
}; };
\ No newline at end of file
.app-mob-department-personnel {
width: 100%;
.cancel-icon {
width: 16px;
height: 16px;
background-color: @from-main-background;
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
z-index: 9998;
display: flex;
justify-content: center;
align-items: center;
ion-icon{
position: absolute;
font-size: 16px;
right: 0;
top: 0;
color:@from-main-color;
z-index:9999;
}
}
ion-select{
width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 10px;
text-align: right;
color: @from-main-color;
}
ion-select::part(text) {
padding-right: 15px;
}
ion-select::part(icon) {
display: none !important;
opacity: 0 !important;
}
.ion-select-icon {
right: 17px;
top: 50%;
margin-top: -3px;
position: absolute;
width: 0;
height: 0;
color: currentcolor;
pointer-events: none;
border-top: 5px solid;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
color: @from-main-color;
}
}
<template>
<div class="app-mob-department-personnel">
<ion-select :disabled="disabled" @ionChange="change" :multiple="multiple" @click="onClick" :ok-text="$t('app.button.confirm')" :cancel-text="$t('app.button.cancel')">
<ion-select-option v-for="(item, index) in items" :key="index" :value="item.id">{{item.label}}
</ion-select-option>
</ion-select>
<!-- <template>
<ion-icon v-if="!disabled" @click="openView" name="search-outline"></ion-icon>
</template> -->
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { Subject } from 'rxjs';
import { Http } from "@/ibiz-core/utils";
import { CodeListService } from "@/ibiz-core";
@Component({})
export default class AppMobDepartmentPersonnel extends Vue {
/**
* 名称标识
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
@Prop() public name!: string;
/**
* 树加载地址
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
@Prop() public treeurl?: string;
/**
* 数据接口地址
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
@Prop() public url!: string;
/**
* 多选
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
@Prop({default: false}) public multiple?: boolean;
/**
* 数据对象
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
@Prop() public data: any;
/**
* 代码表标识
*
* @memberof AppMobDepartmentPersonnel
*/
@Prop() public tag?: string;
/**
* 代码表类型
*
* @memberof AppMobDepartmentPersonnel
*/
@Prop() public codelistType?: string;
/**
* 过滤属性标识
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
@Prop() public filter?: string;
/**
* 是否启用
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
@Prop() public disabled?: boolean;
/**
* 值
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
@Prop() public value: any;
/**
* 上下文参数
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
@Prop() public context: any;
/**
* 关联属性
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
@Prop() public valueitem: any;
/**
* 填充属性
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
@Prop() public fillmap: any;
/**
* 选中项对象集合
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
public selects: any[] = [];
/**
* 选中项label集合
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
public selectsLabel: any[] = [] ;
/**
* 下拉数组
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
public items: any[] = [];
/**
* 过滤值
*
* @type {string}
* @memberof AppMobDepartmentPersonnel
*/
public filtervalue: string = '';
/**
* 获取需要过滤的部门id
*
* @memberof AppMobDepartmentPersonnel
*/
public getDepertmentId(){
const context: any = JSON.parse(JSON.stringify(this.context));
if(this.filter){
if(this.data[this.filter]){
this.filtervalue = this.data[this.filter];
}else if(context[this.filter]){
this.filtervalue = context[this.filter];
}else{
this.filtervalue = context.srfsdept;
}
}else{
this.filtervalue = context.srfsdept;
}
}
/**
* 下拉加载数据
*
* @param {*} $event
* @memberof AppMobDepartmentPersonnel
*/
public onClick($event: any){
const items: Array<any> = this.$store.getters.getDepartmentPersonnel();
if(items.length > 0){
this.items = items;
}else{
this.getDepertmentId();
if(this.treeurl){
let tempUrl = this.treeurl.replace('{deptId}',this.filtervalue);
let get = Http.getInstance().get(tempUrl, true);
get.then((response: any)=>{
if(response.status === 200) {
this.getTreeItems(response.data);
}
});
}else{
this.getPersonnelItems(this.filtervalue);
}
}
console.log('items',this.items);
}
/**
* 加载当前部门和其下级部门数据
*
* @param {*} $event
* @memberof AppMobDepartmentPersonnel
*/
public getTreeItems(treeItems: Array<any>){
if(treeItems.length > 0){
treeItems.forEach((treeItem: any)=>{
this.getPersonnelItems(treeItem.id);
});
}
}
/**
* 加载部门人员数据
*
* @param {*} $event
* @memberof AppMobDepartmentPersonnel
*/
public getPersonnelItems($event: string){
let tempUrl = this.url.replace('{deptId}',$event);
let get = Http.getInstance().get(tempUrl, true);
get.then((response: any) => {
if(response.status === 200 && response.data.length > 0) {
response.data.forEach((item: any)=>{
this.items.push(item);
});
}
this.$store.commit("addDepartmentPersonnel",this.items);
}).catch((error: any) => {
console.log(error)
})
}
/**
* 值变化
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
@Watch('data',{immediate:true,deep:true})
onValueChange(newVal: any, oldVal: any) {
this.selects = [];
this.selectsLabel = [];
if (newVal) {
let item: any = {};
item.label = this.data[this.name]?this.data[this.name].split(','):[];
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(',') : [];
}
}
const callback:any = (item:any) =>{
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);
let i = this.items.findIndex((select: any) => Object.is(select.id,_item.id));
if(i < 0){
this.items.push(_item);
}
this.selectsLabel.push(_item.id);
})
}
if(item.label.length == 0 && item.id.length > 0){
this.fillLabel(item,item.id,(result:any) =>{
item.label = result.label;
callback(item);
});
}else{
callback(item);
}
}
}
/**
* 填充label
*
* @memberof AppMobDepartmentPersonnel
*/
public fillLabel(tempObject:any,valueItem:Array<any>,callback:any){
if(tempObject.label.length === 0 && tempObject.id.length >0 && this.tag && this.codelistType && Object.is(this.codelistType,"DYNAMIC")){
let codeListService:CodeListService = new CodeListService();
codeListService.getItems(this.tag).then((items:any) =>{
if(items && items.length >0 && valueItem.length >0){
let tempLabel:Array<any> = [];
valueItem.forEach((value:any) =>{
let result:any = items.find((item:any) =>{
return item.id === value;
})
tempLabel.push(result.label);
})
Object.assign(tempObject,{label:tempLabel});
}
callback(tempObject);
}).catch((error:any) =>{
console.log(error);
})
}
}
/**
* 打开选择视图
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
public openView() {
const view: any = {
viewname: 'app-group-picker',
title: (this.$t('components.appGroupSelect.groupSelect') as string)
};
const context: any = JSON.parse(JSON.stringify(this.context));
this.getDepertmentId();
const param: any = {};
Object.assign(param, {
showtree: this.treeurl?true:false,
url:this.url,
treeurl:this.treeurl,
filtervalue: this.filtervalue,
multiple: this.multiple,
selects: this.selects,
selectType: 'dept',
});
// 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 AppMobDepartmentPersonnel
*/
public openViewClose(result: any) {
if (result.datas && result.datas.length > 0) {
this.selects = [];
this.selectsLabel = [];
this.selects = [...result.datas];
this.selects.forEach((select: any)=>{
let index = this.items.findIndex((item) => Object.is(item.id, select.id));
if(index < 0){
this.items.push(select);
}
this.selectsLabel.push(select.id);
});
}
this.setValue();
}
/**
* 选中项发生变化时
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
public change($event: any) {
this.selects = [];
if(this.multiple){
if($event.length > 0){
$event.forEach((select: any)=>{
let index = this.items.findIndex((item) => Object.is(item.id, select));
if (index >= 0) {
this.selects.push(this.items[index]);
}
});
}
}else{
let index = this.items.findIndex((item) => Object.is(item.id, $event));
if (index >= 0) {
this.selects.push(this.items[index]);
}
}
this.setValue();
}
/**
* 设置值
*
* @type {*}
* @memberof AppMobDepartmentPersonnel
*/
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.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">
@import './app-mob-department-personnel.less';
</style>
\ No newline at end of file
...@@ -86,3 +86,12 @@ export const getZIndex = (state: any) => () => { ...@@ -86,3 +86,12 @@ export const getZIndex = (state: any) => () => {
export const getSearchformStatus = (state: any) => { export const getSearchformStatus = (state: any) => {
return state.searchformStatus; return state.searchformStatus;
} }
/**
* 获取部门成员
*
* @param state
*/
export const getDepartmentPersonnel = (state: any) => () => {
return state.departmentPersonnel;
}
\ No newline at end of file
...@@ -302,3 +302,14 @@ export const setPopupStatus = (state: any, val: any) => { ...@@ -302,3 +302,14 @@ export const setPopupStatus = (state: any, val: any) => {
export const setSearchformStatus = (state: any, val: any) => { export const setSearchformStatus = (state: any, val: any) => {
state.searchformStatus = val; state.searchformStatus = val;
} }
/**
* 添加部门成员
*
* @param state
* @param codelists
*/
export const addDepartmentPersonnel = (state: any, departmentPersonnel: Array<any>) => {
state.departmentPersonnel = [];
state.departmentPersonnel = [...departmentPersonnel];
}
...@@ -18,5 +18,6 @@ export const rootstate: any = { ...@@ -18,5 +18,6 @@ export const rootstate: any = {
selectTextAlign:'', selectTextAlign:'',
selectNaviStyle:'', selectNaviStyle:'',
popupStatus:true, popupStatus:true,
searchformStatus:false searchformStatus:false,
departmentPersonnel:[],
} }
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册