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> <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-mob-group-picker">
<div class="ibiz-group-container"> <div class="ibiz-group-container">
<div v-if="showTree" class="ibiz-group-tree"> <div class="top">
<ibiz-select-tree :NodesData="treeItems" v-model="treeSelectVal" :treeOnly="true" :defaultChecked="true" @select="treeSelect"></ibiz-select-tree> <div class="left-part" v-if="treeItems.length > 0">
</div> <van-sidebar v-model="activeKey">
<div class="ibiz-group-content"> <van-sidebar-item :title="item.label" v-for="(item, index) in treeItems" :key="index" @click="treeSelect(item.id)"/>
<ibiz-group-card :data="cardItems" text="label" value="id" groupName="group" :multiple="multiple" :defaultSelect="cardSelctVal" @select="groupSelect"></ibiz-group-card> </van-sidebar>
</div> </div>
</div> <div class="right-part">
<div class="ibiz-group-footer"> <div v-for="(item,index) in handledCardItems" :key="index">
<el-button size="small" type="primary" @click="onOK">{{$t('app.commonWords.ok')}}</el-button> <div class="group-header">{{ item.title }}</div>
<el-button size="small" @click="onCancel">{{$t('app.commonWords.cancel')}}</el-button> <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>
</div> </div>
</ion-page>
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -28,7 +54,7 @@ export default class AppMobGroupPicker extends Vue { ...@@ -28,7 +54,7 @@ export default class AppMobGroupPicker extends Vue {
* @type {*} * @type {*}
* @memberof AppMobGroupPicker * @memberof AppMobGroupPicker
*/ */
@Prop() viewdata: any; @Prop() _context: any;
/** /**
* 视图参数 * 视图参数
...@@ -36,7 +62,15 @@ export default class AppMobGroupPicker extends Vue { ...@@ -36,7 +62,15 @@ export default class AppMobGroupPicker extends Vue {
* @type {*} * @type {*}
* @memberof AppMobGroupPicker * @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 { ...@@ -118,6 +152,34 @@ export default class AppMobGroupPicker extends Vue {
*/ */
protected selects: any[] = []; 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 { ...@@ -137,11 +199,11 @@ export default class AppMobGroupPicker extends Vue {
* @memberof AppMobGroupPicker * @memberof AppMobGroupPicker
*/ */
public created() { public created() {
if(!this.viewdata || !this.viewparam) { if(!this._context || !this._viewparams) {
return; return;
} }
this.viewData = JSON.parse(this.viewdata); this.viewData = JSON.parse(this._context);
this.viewParam = JSON.parse(this.viewparam); this.viewParam = JSON.parse(this._viewparams);
this.multiple = this.viewParam.multiple; this.multiple = this.viewParam.multiple;
this.treeurl = this.viewParam.treeurl; this.treeurl = this.viewParam.treeurl;
this.url = this.viewParam.url; this.url = this.viewParam.url;
...@@ -152,6 +214,7 @@ export default class AppMobGroupPicker extends Vue { ...@@ -152,6 +214,7 @@ export default class AppMobGroupPicker extends Vue {
}) })
} }
this.load(); this.load();
this.setViewTitleStatus();
} }
/** /**
...@@ -189,7 +252,7 @@ export default class AppMobGroupPicker extends Vue { ...@@ -189,7 +252,7 @@ export default class AppMobGroupPicker extends Vue {
} }
}).catch((error: any) => { }).catch((error: any) => {
console.log(error) console.log(error)
}) })
} }
/** /**
...@@ -209,6 +272,7 @@ export default class AppMobGroupPicker extends Vue { ...@@ -209,6 +272,7 @@ export default class AppMobGroupPicker extends Vue {
get.then((response: any) => { get.then((response: any) => {
if(response.status === 200) { if(response.status === 200) {
this.cardItems = response.data; this.cardItems = response.data;
this.handleGroupData()
} }
}).catch((error: any) => { }).catch((error: any) => {
console.log(error) console.log(error)
...@@ -216,48 +280,104 @@ export default class AppMobGroupPicker extends Vue { ...@@ -216,48 +280,104 @@ export default class AppMobGroupPicker extends Vue {
} }
/** /**
* 树选中 * 处理分组表数据
* *
* @type {*} * @type {*}
* @memberof AppMobGroupPicker * @memberof AppMobGroupPicker
*/ */
public treeSelect(event: any) { public handleGroupData(){
if(!event || JSON.parse(event).length == 0) { const groupBy = (array:any, f:any) => {
return; let groups:any = {};
} array.forEach(function (o:any) {
const items: any = JSON.parse(event); var group:any = JSON.stringify(f(o));
this.loadGroupData(items[0].id); 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 {*} * @type {*}
* @memberof AppMobGroupPicker * @memberof AppMobGroupPicker
*/ */
public groupSelect(event: any) { public treeSelect(event: any) {
if (!event || !event.select) { this.loadGroupData(event);
return; }
}
if(!this.multiple) {
this.selects = []; /**
* 节点点击
*/
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) { } else {
let index: number = this.selects.findIndex((item: any) => Object.is(event.rselect, item.id)); item.status = 0;
if(index >= 0) { let index = this.selects.indexOf(item)
this.selects.splice(index, 1); this.selects.splice(index,1)
} }
} else { this.geticon(item);
event.select.forEach((key: string) => { this.$forceUpdate();
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) { public geticon(value: any) {
this.selects.push(item); 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 { ...@@ -280,34 +400,31 @@ export default class AppMobGroupPicker extends Vue {
public onCancel() { public onCancel() {
this.$emit('close'); 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> </script>
<style lang="less"> <style lang="less">
.ibiz-mob-group-picker{ @import './app-mob-group-picker.less';
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> </style>
\ No newline at end of file
src/components/app-mob-group-select/app-mob-group-select.less
浏览文件 @ 863b1028
.ibiz-mob-group-select { .ibiz-mob-group-select {
width: 100%; display: flex;
display: flex; justify-content: space-between;
border: 1px solid #DCDFE6; align-items: center;
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;
}
} }
.ibiz-mob-group-select:hover { .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> <template>
<div class="ibiz-mob-group-select"> <div class="ibiz-mob-group-select">
<div class="ibiz-group-content"> <ion-input class="ibz-input" :value="selectName" readonly></ion-input>
<span class="group-item-text" v-if="!multiple"> <ion-icon v-show="selects.length>0" class="delete-value " name="close-circle-outline" @click.stop="clearSelects"></ion-icon>
{{ selectName }} <ion-icon v-show="selects.length<1" class="open-picker" name="search-outline" @click.stop="openView"></ion-icon>
</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>
</div> </div>
</template> </template>
...@@ -39,7 +27,7 @@ export default class AppMobGroupSelect extends Vue { ...@@ -39,7 +27,7 @@ export default class AppMobGroupSelect extends Vue {
* @type {*} * @type {*}
* @memberof AppMobGroupSelect * @memberof AppMobGroupSelect
*/ */
@Prop() treeurl?:boolean; @Prop() treeurl?:string;
/** /**
* 数据接口地址 * 数据接口地址
...@@ -181,8 +169,15 @@ export default class AppMobGroupSelect extends Vue { ...@@ -181,8 +169,15 @@ export default class AppMobGroupSelect extends Vue {
* @memberof AppMobGroupSelect * @memberof AppMobGroupSelect
*/ */
get selectName() { get selectName() {
if(this.selects.length > 0) { if(this.selects.length == 1) {
return this.selects[0].label; 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 { ...@@ -194,7 +189,7 @@ export default class AppMobGroupSelect extends Vue {
*/ */
public async openView() { public async openView() {
const view: any = { const view: any = {
viewname: 'app-group-picker', viewname: 'app-mob-group-picker',
title: (this.$t('components.AppMobGroupSelect.groupSelect') as string) title: (this.$t('components.AppMobGroupSelect.groupSelect') as string)
}; };
const context: any = JSON.parse(JSON.stringify(this.context)); const context: any = JSON.parse(JSON.stringify(this.context));
...@@ -219,13 +214,10 @@ export default class AppMobGroupSelect extends Vue { ...@@ -219,13 +214,10 @@ export default class AppMobGroupSelect extends Vue {
multiple: this.multiple, multiple: this.multiple,
selects: this.selects, selects: this.selects,
}); });
let container: Subject<any> = await this.$appmodal.openModal(view, context, param); const result: any = await this.$appmodal.openModal(view, context, param);
container.subscribe((result: any) => { if (result || Object.is(result.ret, 'OK')) {
if (!result || !Object.is(result.ret, 'OK')) {
return;
}
this.openViewClose(result); this.openViewClose(result);
}); }
} }
/** /**
...@@ -237,9 +229,9 @@ export default class AppMobGroupSelect extends Vue { ...@@ -237,9 +229,9 @@ export default class AppMobGroupSelect extends Vue {
public openViewClose(result: any) { public openViewClose(result: any) {
this.selects = []; this.selects = [];
if (result.datas && result.datas.length > 0) { 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 { ...@@ -250,14 +242,14 @@ export default class AppMobGroupSelect extends Vue {
*/ */
public remove(item: any) { public remove(item: any) {
this.selects.splice(this.selects.indexOf(item), 1); this.selects.splice(this.selects.indexOf(item), 1);
this.setValue() this.setValue();
} }
/** /**
* 设置值 * 设置值
* *
* @type {*} * @type {*}
* @memberof AppMobGroupSelect * @memberof AppGroupSelect
*/ */
public setValue() { public setValue() {
let item: any = {}; let item: any = {};
...@@ -323,7 +315,17 @@ export default class AppMobGroupSelect extends Vue { ...@@ -323,7 +315,17 @@ export default class AppMobGroupSelect extends Vue {
}) })
} }
} }
/**
* 全部清除
*
* @memberof AppMobGroupSelect
*/
public clearSelects(){
this.selects = [];
this.setValue();
}
} }
</script> </script>
......
src/styles/theme/theme.less
浏览文件 @ 863b1028
...@@ -284,6 +284,16 @@ ...@@ -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); .user_theme(@theme-color, @text-color);
} }
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或