Skip to content

iBiz-Vue-Mob-R7-Res
iBiz-Vue-Mob-R7-Res
提交 863b1028 编写于 作者: zhujiamin's avatar zhujiamin
浏览文件
操作

人员单位

上级 81664238
隐藏空白字符变更
内嵌 并排
正在显示 包含 286 行增加 和 147 行删除
src/components/app-mob-group-picker/app-mob-group-picker.less 0 → 100644
浏览文件 @ 863b1028
.app-mob-group-picker-choose-view{
position: relative;
.ibiz-mob-group-picker{
width: 100%;
height: 100%;
.ibiz-group-container{
height: 100%;
display: flex;
flex-direction: column;
.top{
height: 100%;
display: flex;
.left-part{
.van-sidebar{
.van-sidebar-item{
font-size: 16px;
}
}
}
.right-part{
width: 100%;
overflow-y: scroll;
padding-bottom: 100px;
.group-header{
font-size: 16px;
font-weight: 600;
padding: 10px 18px 10px;
background-color: #f5f5f5;
}
.group-list{
margin-bottom: 15px;
.list-item{
font-size: 15px;
.tree-icon{
color: #3880ff;
font-size: 20px;
}
}
}
}
}
.ibiz-group-footer{
width: 100%;
position: absolute;
bottom: 0;
.van-button{
width: 100%;
}
}
}
}
}
\ No newline at end of file
src/components/app-mob-group-picker/app-mob-group-picker.vue
浏览文件 @ 863b1028
<template>
<ion-page :className="{ 'view-container': true, 'default-mode-view': true, 'demobeditview': true, 'app-mob-group-picker-choose-view': true }">
<ion-header>
<ion-toolbar v-show="titleStatus" class="ionoc-view-header">
<ion-buttons slot="start">
<ion-button @click="closeView">
<ion-icon name="chevron-back"></ion-icon>
{{$t('app.button.back')}}
</ion-button>
</ion-buttons>
<ion-title class="view-title"><label class="title-label"> 选择</label></ion-title>
</ion-toolbar>
</ion-header>
<div class="ibiz-mob-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('app.commonWords.ok')}}</el-button>
<el-button size="small" @click="onCancel">{{$t('app.commonWords.cancel')}}</el-button>
<div class="top">
<div class="left-part" v-if="treeItems.length > 0">
<van-sidebar v-model="activeKey">
<van-sidebar-item :title="item.label" v-for="(item, index) in treeItems" :key="index" @click="treeSelect(item.id)"/>
</van-sidebar>
</div>
<div class="right-part">
<div v-for="(item,index) in handledCardItems" :key="index">
<div class="group-header">{{ item.title }}</div>
<ion-list class="group-list">
<template v-for="(item, index) in item.value">
<ion-item :key="index" @click="click_node(item)" class="list-item">
<ion-label>{{ item.label }}</ion-label>
<ion-icon class="tree-icon" slot="end" :name="geticon(item.status)" @click.stop="icon_click(item)"></ion-icon>
</ion-item>
</template>
</ion-list>
</div>
</div>
</div>
<div class="ibiz-group-footer">
<van-button size="large" type="primary" @click="onOK">确定</van-button>
</div>
</div>
</div>
</ion-page>
</template>
<script lang="ts">
......@@ -28,7 +54,7 @@ export default class AppMobGroupPicker extends Vue {
* @type {*}
* @memberof AppMobGroupPicker
*/
@Prop() viewdata: any;
@Prop() _context: any;
/**
* 视图参数
......@@ -36,7 +62,15 @@ export default class AppMobGroupPicker extends Vue {
* @type {*}
* @memberof AppMobGroupPicker
*/
@Prop() viewparam: any;
@Prop() _viewparams: any;
/**
* 侧边栏激活项
*
* @type {*}
* @memberof AppMobGroupPicker
*/
public activeKey:number = 0;
/**
* 多选
......@@ -118,6 +152,34 @@ export default class AppMobGroupPicker extends Vue {
*/
protected selects: any[] = [];
/**
* 处理后的分组表数据集
*
* @type {*}
* @memberof AppMobGroupPicker
*/
public handledCardItems: any[] = [];
/**
* 设置工具栏标题状态
*
* @memberof IbzDailyDailyCreateMobEditViewBase
*/
public titleStatus: boolean = true;
/**
* 设置工具栏状态
*
* @memberof IbzDailyDailyCreateMobEditViewBase
*/
public setViewTitleStatus(){
const thirdPartyName = this.$store.getters.getThirdPartyName();
if(thirdPartyName){
this.titleStatus = false;
}
}
/**
* 是否显示树
*
......@@ -137,11 +199,11 @@ export default class AppMobGroupPicker extends Vue {
* @memberof AppMobGroupPicker
*/
public created() {
if(!this.viewdata || !this.viewparam) {
if(!this._context || !this._viewparams) {
return;
}
this.viewData = JSON.parse(this.viewdata);
this.viewParam = JSON.parse(this.viewparam);
this.viewData = JSON.parse(this._context);
this.viewParam = JSON.parse(this._viewparams);
this.multiple = this.viewParam.multiple;
this.treeurl = this.viewParam.treeurl;
this.url = this.viewParam.url;
......@@ -152,6 +214,7 @@ export default class AppMobGroupPicker extends Vue {
})
}
this.load();
this.setViewTitleStatus();
}
/**
......@@ -189,7 +252,7 @@ export default class AppMobGroupPicker extends Vue {
}
}).catch((error: any) => {
console.log(error)
})
})
}
/**
......@@ -209,6 +272,7 @@ export default class AppMobGroupPicker extends Vue {
get.then((response: any) => {
if(response.status === 200) {
this.cardItems = response.data;
this.handleGroupData()
}
}).catch((error: any) => {
console.log(error)
......@@ -216,48 +280,104 @@ export default class AppMobGroupPicker extends Vue {
}
/**
* 树选中
* 处理分组表数据
*
* @type {*}
* @memberof AppMobGroupPicker
*/
public treeSelect(event: any) {
if(!event || JSON.parse(event).length == 0) {
return;
}
const items: any = JSON.parse(event);
this.loadGroupData(items[0].id);
public handleGroupData(){
const groupBy = (array:any, f:any) => {
let groups:any = {};
array.forEach(function (o:any) {
var group:any = JSON.stringify(f(o));
groups[group] = groups[group] || [];
groups[group].push(o);
});
return Object.keys(groups).map(function (group:any) {
return groups[group];
});
};
const arrayGroupBy = (list:any, groupId:any) => {
let handled:any = groupBy(list, function (item:any) {
return [item[groupId]];
});
for (let i = 0; i < handled.length; i++) {
let array:any = handled[i];
// 初始化图标状态
for (let i = 0; i < array.length; i++) {
let element = array[i];
element.status = 0
}
this.handledCardItems[i] = {}
this.handledCardItems[i].title = array[0].group
this.handledCardItems[i].value = array;
}
}
arrayGroupBy(this.cardItems,'group');
this.$forceUpdate();
}
/**
* 分组表选中
* 树选中
*
* @type {*}
* @memberof AppMobGroupPicker
*/
public groupSelect(event: any) {
if (!event || !event.select) {
return;
}
if(!this.multiple) {
this.selects = [];
public treeSelect(event: any) {
this.loadGroupData(event);
}
/**
* 节点点击
*/
public click_node(item: any) {
this.icon_click(item);
}
/**
* 图标点击
*/
public icon_click(item: any) {
if (item.status === 0) {
let index = this.selects.indexOf(item)
if (index == -1) {
if (this.multiple) {
item.status = 1;
this.selects.push(item);
} else {
this.selects[0] = item;
// 维护图标状态
this.handledCardItems.forEach((arr:any)=>{
arr.value.forEach((item:any)=>{
item.status = 0;
})
})
item.status = 1;
}
}
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);
}
});
} else {
item.status = 0;
let index = this.selects.indexOf(item)
this.selects.splice(index,1)
}
this.geticon(item);
this.$forceUpdate();
}
/**
* 获取图标
*/
public geticon(value: any) {
switch (value) {
case 0:
return 'ellipse-outline'
case 1:
return 'checkmark-circle-outline'
default: 'ellipse-outline'
break;
}
}
......@@ -280,34 +400,31 @@ export default class AppMobGroupPicker extends Vue {
public onCancel() {
this.$emit('close');
}
public mounted(){
this.thirdPartyInit();
}
/**
* 第三方容器初始化
*
* @memberof IbzDailyDailyCreateMobEditViewBase
*/
protected thirdPartyInit(){
this.$viewTool.setViewTitleOfThirdParty('选择');
this.$viewTool.setThirdPartyEvent(this.closeView);
}
/**
* on_ok_click
*/
public closeView() {
this.$emit('close');
}
}
</script>
<style lang="less">
.ibiz-mob-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;
}
}
@import './app-mob-group-picker.less';
</style>
\ No newline at end of file
src/components/app-mob-group-select/app-mob-group-select.less
浏览文件 @ 863b1028
.ibiz-mob-group-select {
width: 100%;
display: flex;
border: 1px solid #DCDFE6;
height: 32px;
border-radius: 4px;
.ibiz-group-content {
flex-grow: 1;
height: 32px;
.group-item-text{
padding-left: 15px;
font-size: 13px;
}
.ibiz-group-item {
display: inline-block;
border: 1px solid #bbb;
border-radius: 5px;
font-size: 12px;
height: 24px;
line-height: 22px;
margin: 2px 0px 2px 6px;
padding: 1px 3px 0 8px;
background-color: #f4f4f5;
border-color: #e9e9eb;
color: #909399;
.group-item-multiple{
margin: 0 8px 0 0;
}
.el-icon-close{
color: #909399;
background-color: #c0c4cc;
border-radius: 50%;
top: 0;
}
.el-icon-close:hover{
color: #fff;
background-color: #909399;
}
}
}
.ibiz-group-open {
display: flex;
text-align: center;
align-items: center;
padding: 0 5px;
}
display: flex;
justify-content: space-between;
align-items: center;
}
.ibiz-mob-group-select:hover {
border-color: #108cee;
}
\ No newline at end of file
src/components/app-mob-group-select/app-mob-group-select.vue
浏览文件 @ 863b1028
<template>
<div class="ibiz-mob-group-select">
<div class="ibiz-group-content">
<span class="group-item-text" v-if="!multiple">
{{ selectName }}
</span>
<template v-else v-for="(select, index) of selects">
<div :key="index" class="ibiz-group-item">
<span class="group-item-multiple">{{ select.label }}</span>
<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" style="color: #c0c4cc;"></i>
</div>
<ion-input class="ibz-input" :value="selectName" readonly></ion-input>
<ion-icon v-show="selects.length>0" class="delete-value " name="close-circle-outline" @click.stop="clearSelects"></ion-icon>
<ion-icon v-show="selects.length<1" class="open-picker" name="search-outline" @click.stop="openView"></ion-icon>
</div>
</template>
......@@ -39,7 +27,7 @@ export default class AppMobGroupSelect extends Vue {
* @type {*}
* @memberof AppMobGroupSelect
*/
@Prop() treeurl?:boolean;
@Prop() treeurl?:string;
/**
* 数据接口地址
......@@ -181,8 +169,15 @@ export default class AppMobGroupSelect extends Vue {
* @memberof AppMobGroupSelect
*/
get selectName() {
if(this.selects.length > 0) {
if(this.selects.length == 1) {
return this.selects[0].label;
} else {
let chosenName = '';
for (let i = 0; i < this.selects.length; i++) {
const element:any = this.selects[i];
chosenName += element.label + ',';
}
return chosenName.slice(0,chosenName.length-1)
}
}
......@@ -194,7 +189,7 @@ export default class AppMobGroupSelect extends Vue {
*/
public async openView() {
const view: any = {
viewname: 'app-group-picker',
viewname: 'app-mob-group-picker',
title: (this.$t('components.AppMobGroupSelect.groupSelect') as string)
};
const context: any = JSON.parse(JSON.stringify(this.context));
......@@ -219,13 +214,10 @@ export default class AppMobGroupSelect extends Vue {
multiple: this.multiple,
selects: this.selects,
});
let container: Subject<any> = await this.$appmodal.openModal(view, context, param);
container.subscribe((result: any) => {
if (!result || !Object.is(result.ret, 'OK')) {
return;
}
const result: any = await this.$appmodal.openModal(view, context, param);
if (result || Object.is(result.ret, 'OK')) {
this.openViewClose(result);
});
}
}
/**
......@@ -237,9 +229,9 @@ export default class AppMobGroupSelect extends Vue {
public openViewClose(result: any) {
this.selects = [];
if (result.datas && result.datas.length > 0) {
this.selects = result.datas
this.selects = result.datas;
}
this.setValue()
this.setValue();
}
/**
......@@ -250,14 +242,14 @@ export default class AppMobGroupSelect extends Vue {
*/
public remove(item: any) {
this.selects.splice(this.selects.indexOf(item), 1);
this.setValue()
this.setValue();
}
/**
* 设置值
*
* @type {*}
* @memberof AppMobGroupSelect
* @memberof AppGroupSelect
*/
public setValue() {
let item: any = {};
......@@ -323,7 +315,17 @@ export default class AppMobGroupSelect extends Vue {
})
}
}
/**
* 全部清除
*
* @memberof AppMobGroupSelect
*/
public clearSelects(){
this.selects = [];
this.setValue();
}
}
</script>
......
src/styles/theme/theme.less
浏览文件 @ 863b1028
......@@ -284,6 +284,16 @@
}
}
// app-mob-group-picker组件
.ibiz-mob-group-picker{
.ibiz-group-footer{
.van-button{
background: @theme-color;
color: @text-color;
}
}
}
// 用户自定义主题文件
.user_theme(@theme-color, @text-color);
}
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或