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

补充表单分组界面面行为 --fix1

上级 f8e59bd0
...@@ -23,14 +23,34 @@ ...@@ -23,14 +23,34 @@
--background: #f5f4f9; --background: #f5f4f9;
--color: #111111; --color: #111111;
font-size: large; font-size: large;
display: flex;
justify-content: space-between;
align-items: center;
}
.actiongroup{
position: absolute;
right: 10px;
font-size: 1rem;
color: #4285F4;
display: flex;
justify-content: flex-start;
align-items: center;
.groupbox{
margin-right: 5px;
ion-icon{
position: relative;
top: 2px;
} }
.van-button{ .van-button{
height: 100%; height: 100%;
position: absolute;
right: 40px;
background-color: transparent; background-color: transparent;
border: none; border: none;
color: #4285F4; color: #4285F4;
font-size: 1rem; padding-left: 0;
}
}
}
.closemode{
right: 40px;
} }
} }
\ No newline at end of file
...@@ -6,7 +6,12 @@ ...@@ -6,7 +6,12 @@
<span :class="titleClass" class="group-title"><ion-icon class="group-title-icon" v-if="iconName" :name="iconName"></ion-icon>{{caption}}</span> <span :class="titleClass" class="group-title"><ion-icon class="group-title-icon" v-if="iconName" :name="iconName"></ion-icon>{{caption}}</span>
</ion-label> </ion-label>
<ion-icon v-show="titleBarCloseMode !== 0" class="group-collapse" :name="collapseContant ? 'chevron-back-outline' : 'chevron-down-outline'"></ion-icon> <ion-icon v-show="titleBarCloseMode !== 0" class="group-collapse" :name="collapseContant ? 'chevron-back-outline' : 'chevron-down-outline'"></ion-icon>
<van-button plain type="info" v-show="isHaveUiActionGroup" @click="doUIAction($event)">{{groupUiAction}}</van-button> <div :class="{'actiongroup':true,'closemode':titleBarCloseMode !== 0}" v-show="isHaveUiActionGroup">
<div class="groupbox" v-for="item in uiActionGroup.details" :key="item.index" @click="doUIAction($event,item.name)">
<ion-icon :name="item.icon" v-show="item.isShowIcon"/>
<van-button plain type="info" v-show="item.isShowCaption">{{item.caption}}</van-button>
</div>
</div>
</ion-item-divider> </ion-item-divider>
<ion-row ref="group" v-show="!collapseContant" class="form-group-content"> <ion-row ref="group" v-show="!collapseContant" class="form-group-content">
<slot></slot> <slot></slot>
...@@ -17,7 +22,7 @@ ...@@ -17,7 +22,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'; import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
@Component({}) @Component({})
export default class AppFormGroup extends Vue { export default class AppFormGroup extends Vue {
...@@ -183,7 +188,9 @@ export default class AppFormGroup extends Vue { ...@@ -183,7 +188,9 @@ export default class AppFormGroup extends Vue {
*/ */
public doUIAction($event: any, item: any): void { public doUIAction($event: any, item: any): void {
this.uiActionGroup.details.map((detail: any, i: number) => { this.uiActionGroup.details.map((detail: any, i: number) => {
if (item == detail.name) {
this.$emit('groupuiactionclick', { event: $event, item: detail }); this.$emit('groupuiactionclick', { event: $event, item: detail });
}
}) })
} }
...@@ -209,6 +216,77 @@ export default class AppFormGroup extends Vue { ...@@ -209,6 +216,77 @@ export default class AppFormGroup extends Vue {
} }
} }
} }
/**
* 注入的UI服务
*
* @type {*}
* @memberof AppFormGroup
*/
@Prop() public uiService!: any;
/**
* 注入数据
*
* @type {*}
* @memberof AppFormGroup
*/
@Prop() public data!: any;
/**
* 监听值变化
*
* @memberof AppFormGroup
*/
@Watch('data')
onSrfupdatedateChange(newVal: any, oldVal: any) {
if((newVal !== oldVal) && this.uiActionGroup.details.length >0){
this.calcActionItemAuthState(newVal,this.uiActionGroup.details,this.uiService);
}
}
/**
* 计算界面行为项权限状态
*
* @param {*} [data] 传入数据
* @param {*} [ActionModel] 界面行为模型
* @param {*} [UIService] 界面行为服务
* @memberof AppFormGroup
*/
public calcActionItemAuthState(data:any,ActionModel:any,UIService:any){
for (const key in ActionModel) {
if (!ActionModel.hasOwnProperty(key)) {
return;
}
const _item = ActionModel[key];
if(_item && _item['dataaccaction'] && UIService){
let dataActionResult:any;
if(Object.is(_item['actiontarget'],"NONE") || Object.is(_item['actiontarget'],"")){
dataActionResult = UIService.getResourceOPPrivs(_item['dataaccaction']);
}else{
if(data && Object.keys(data).length >0){
dataActionResult = UIService.getAllOPPrivs(data)[_item['dataaccaction']];
}
}
// 无权限:0;有权限:1
if(dataActionResult === 0){
// 禁用:1;隐藏:2;隐藏且默认隐藏:6
if(_item.noprivdisplaymode === 1){
_item.disabled = true;
}
if((_item.noprivdisplaymode === 2) || (_item.noprivdisplaymode === 6)){
_item.visabled = false;
}else{
_item.visabled = true;
}
}
if(dataActionResult === 1){
_item.visabled = true;
_item.disabled = false;
}
}
}
}
} }
</script> </script>
<style lang='less'> <style lang='less'>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册