Mosher 发布系统代码 [后台服务，演示应用]

app_Web/src/locale/lanres/entities/ibizbook/ibizbook_en_US.ts

@@ -230,7 +230,7 @@ export default {
 		uiactions: {
 		},
 	},
-	list_list: {
+	autogrouplist_list: {
 		nodata:"",
 		uiactions: {
 		},
@@ -243,6 +243,11 @@ export default {
         remove: "Remove",
 		},
 	},
+	haspanellist_list: {
+		nodata:"",
+		uiactions: {
+		},
+	},
 	usr2_dataview: {
 		nodata:"",
 		uiactions: {

app_Web/src/locale/lanres/entities/ibizbook/ibizbook_zh_CN.ts

@@ -229,7 +229,7 @@ export default {
 		uiactions: {
 		},
 	},
-	list_list: {
+	autogrouplist_list: {
 		nodata:"",
 		uiactions: {
 		},
@@ -242,6 +242,11 @@ export default {
 			remove: "批量删除",
 		},
 	},
+	haspanellist_list: {
+		nodata:"",
+		uiactions: {
+		},
+	},
 	usr2_dataview: {
 		nodata:"",
 		uiactions: {

app_Web/src/locale/lanres/entities/ibizsample0001/ibizsample0001_en_US.ts

@@ -110,6 +110,7 @@ export default {
 			f27: "数据选择（无AC、数据链接）", 
 			f28: "数据选择（下拉）", 
 			f29: "数据选择（下拉、数据链接）", 
+			formitem: "地址栏（选择）", 
 			ibizsample0002id: "值项表单项", 
 			f30: "自动填充", 
 			f31: "自动填充（只能选择）", 

app_Web/src/locale/lanres/entities/ibizsample0001/ibizsample0001_zh_CN.ts

@@ -109,6 +109,7 @@ export default {
 			f27: "数据选择（无AC、数据链接）", 
 			f28: "数据选择（下拉）", 
 			f29: "数据选择（下拉、数据链接）", 
+			formitem: "地址栏（选择）", 
 			ibizsample0002id: "值项表单项", 
 			f30: "自动填充", 
 			f31: "自动填充（只能选择）", 

app_Web/src/pages/sample/ibizbookauto-group-list-view/ibizbookauto-group-list-view.vue

@@ -2,7 +2,7 @@
 import { Component } from 'vue-property-decorator';
 import IBIZBOOKAutoGroupListViewBase from './ibizbookauto-group-list-view-base.vue';
 
-import view_list from '@widgets/ibizbook/list-list/list-list.vue';
+import view_list from '@widgets/ibizbook/auto-group-list-list/auto-group-list-list.vue';
 import view_searchform from '@widgets/ibizbook/default-searchform/default-searchform.vue';
 @Component({
     components: {

app_Web/src/pages/sample/ibizbookhas-panel-list-view/ibizbookhas-panel-list-view.vue

@@ -2,7 +2,7 @@
 import { Component } from 'vue-property-decorator';
 import IBIZBOOKHasPanelListViewBase from './ibizbookhas-panel-list-view-base.vue';
 
-import view_list from '@widgets/ibizbook/list-list/list-list.vue';
+import view_list from '@widgets/ibizbook/has-panel-list-list/has-panel-list-list.vue';
 import view_searchform from '@widgets/ibizbook/default-searchform/default-searchform.vue';
 @Component({
     components: {

app_Web/src/widgets/ibizbook/auto-group-list-list/auto-group-list-list-base.vue

+<template>  
+    <div :class="['app-list',this.items.length > 0 ? '' : 'app-list-empty' ]">
+        <div v-if="items.length > 0">
+            <el-collapse>
+               <el-collapse-item v-for="(group,index) in groupData" :key="index">
+                    <template slot="title">
+                    <div style="margin: 0 0 0 12px;"><b>{{group.group}}</b></div>
+                    </template>
+                    <div v-if="group.children.length > 0" style="margin: 0 0 0 32px;">
+                        <div v-for="item in group.children" :key="item.srfkey"  :class="['app-list-item', {'isSelect': item.isselected === true ? true : false}]" @click="handleClick(item)"  @dblclick="handleDblClick(item)">
+                                <div class="app-list-item-content">{{item.srfmajortext}}</div>
+                                <div calss="app-list-item-action">
+                                    <template v-for="(action,index) in Object.keys(ActionModel)">
+                                        <a :key="index" style="display: inline-block;margin: 0 12px;" @click="uiAction(item, action, $event)">
+                                            <i :class="ActionModel[action].icon" style="margin-right:2px;"></i>
+                                            <span>{{ActionModel[action].caption}}</span>
+                                        </a>
+                                    </template>
+                                </div>
+                        </div>
+                    </div>
+                    <div v-else style="text-align: center;">
+                        {{ $t('entities.ibizbook.autogrouplist_list.nodata') }}
+                    </div>
+                </el-collapse-item>
+            </el-collapse>
+            <template v-if="isScrollBar">
+            <div v-if="totalRecord>items.length" class="loadmore">{{ this.$t('app.commonWords.loadmore') }}</div>
+            <div v-else class="loadmore">{{ this.$t('app.commonWords.nomore') }}</div>
+            </template>
+        </div>
+        <div v-else>
+            {{ $t('entities.ibizbook.autogrouplist_list.nodata') }}
+        </div>
+        <el-backtop target=".content-container .app-list"></el-backtop>
+    </div>
+</template>
+<script lang='tsx'>
+import { Vue, Component, Prop, Provide, Emit, Watch, Model,Inject } from 'vue-property-decorator';
+import { CreateElement } from 'vue';
+import { Subject, Subscription } from 'rxjs';
+import { ControlInterface } from '@/interface/control';
+import { UIActionTool,Util,ViewTool } from '@/utils';
+import NavDataService from '@/service/app/navdata-service';
+import AppCenterService from "@service/app/app-center-service";
+import IBIZBOOKService from '@/service/ibizbook/ibizbook-service';
+import AutoGroupListService from './auto-group-list-list-service';
+import IBIZBOOKUIService from '@/uiservice/ibizbook/ibizbook-ui-service';
+import CodeListService from "@/codelist/codelist-service";
+
+
+@Component({
+    components: {
+      
+    }
+})
+export default class AutoGroupListBase extends Vue implements ControlInterface {
+
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AutoGroupListBase
+     */
+    @Prop() public name?: string;
+
+    /**
+     * 视图通讯对象
+     *
+     * @type {Subject<ViewState>}
+     * @memberof AutoGroupListBase
+     */
+    @Prop() public viewState!: Subject<ViewState>;
+
+    /**
+     * 应用上下文
+     *
+     * @type {*}
+     * @memberof AutoGroupListBase
+     */
+    @Prop() public context: any;
+
+    /**
+     * 视图参数
+     *
+     * @type {*}
+     * @memberof AutoGroupListBase
+     */
+    @Prop() public viewparams: any;
+
+    /**
+     * 视图状态事件
+     *
+     * @public
+     * @type {(Subscription | undefined)}
+     * @memberof AutoGroupListBase
+     */
+    public viewStateEvent: Subscription | undefined;
+
+    /**
+     * 获取部件类型
+     *
+     * @returns {string}
+     * @memberof AutoGroupListBase
+     */
+    public getControlType(): string {
+        return 'LIST'
+    }
+
+
+
+    /**
+     * 计数器服务对象集合
+     *
+     * @type {Array<*>}
+     * @memberof AutoGroupListBase
+     */    
+    public counterServiceArray:Array<any> = [];
+
+    /**
+     * 建构部件服务对象
+     *
+     * @type {AutoGroupListService}
+     * @memberof AutoGroupListBase
+     */
+    public service: AutoGroupListService = new AutoGroupListService({ $store: this.$store });
+
+    /**
+     * 实体服务对象
+     *
+     * @type {IBIZBOOKService}
+     * @memberof AutoGroupListBase
+     */
+    public appEntityService: IBIZBOOKService = new IBIZBOOKService({ $store: this.$store });
+    
+
+
+    /**
+     * 转化数据
+     *
+     * @param {any} args
+     * @memberof  AutoGroupListBase
+     */
+    public transformData(args: any) {
+        let _this: any = this;
+        if(_this.service && _this.service.handleRequestData instanceof Function && _this.service.handleRequestData('transform',_this.context,args)){
+            return _this.service.handleRequestData('transform',_this.context,args)['data'];
+        }
+    }
+
+    /**
+     * 关闭视图
+     *
+     * @param {any} args
+     * @memberof AutoGroupListBase
+     */
+    public closeView(args: any): void {
+        let _this: any = this;
+        _this.$emit('closeview', [args]);
+    }
+
+    /**
+     *  计数器刷新
+     *
+     * @memberof AutoGroupListBase
+     */
+    public counterRefresh(){
+        const _this:any =this;
+        if(_this.counterServiceArray && _this.counterServiceArray.length >0){
+            _this.counterServiceArray.forEach((item:any) =>{
+                if(item.refreshData && item.refreshData instanceof Function){
+                    item.refreshData();
+                }
+            })
+        }
+    }
+
+
+
+    /**
+     * 获取多项数据
+     *
+     * @returns {any[]}
+     * @memberof AutoGroupListBase
+     */
+    public getDatas(): any[] {
+        return this.selections;
+    }
+
+    /**
+     * 获取单项树
+     *
+     * @returns {*}
+     * @memberof AutoGroupListBase
+     */
+    public getData(): any {
+        return null;
+    }
+
+    /**
+     * 是否默认选中第一条数据
+     *
+     * @type {boolean}
+     * @memberof AutoGroupListBase
+     */
+    @Prop({ default: false }) public isSelectFirstDefault!: boolean;
+
+    /**
+     * 显示处理提示
+     *
+     * @type {boolean}
+     * @memberof AutoGroupListBase
+     */
+    @Prop({ default: true }) public showBusyIndicator?: boolean;
+
+    /**
+     * 部件行为--create
+     *
+     * @type {string}
+     * @memberof AutoGroupListBase
+     */
+    @Prop() public createAction!: string;
+
+    /**
+     * 部件行为--remove
+     *
+     * @type {string}
+     * @memberof AutoGroupListBase
+     */
+    @Prop() public removeAction!: string;
+
+    /**
+     * 部件行为--update
+     *
+     * @type {string}
+     * @memberof AutoGroupListBase
+     */
+    @Prop() public updateAction!: string;
+
+    /**
+     * 部件行为--fetch
+     *
+     * @type {string}
+     * @memberof AutoGroupListBase
+     */
+    @Prop() public fetchAction!: string;
+
+    /**
+     * 打开新建数据视图
+     *
+     * @type {any}
+     * @memberof AutoGroupListBase
+     */
+    @Prop() public newdata: any;
+    /**
+     * 打开编辑数据视图
+     *
+     * @type {any}
+     * @memberof AutoGroupListBase
+     */
+    @Prop() public opendata: any;
+
+    /**
+     * this引用
+     *
+     * @type {number}
+     * @memberof AutoGroupListBase
+     */
+    public thisRef: any = this;
+
+    /**
+     * 分组属性
+     * 
+     * @type {string}
+     * @memberof AutoGroupListBase
+     */
+    public groupField: string = "author";
+
+    /**
+     * 分组数据
+     * 
+     * @type {Array<any>}
+     * @memberof AutoGroupListBase
+     */
+    public groupData: Array<any> = [];
+
+    /**
+     * 分组模式
+     * 
+     * @type {string}
+     * @memberof AutoGroupListBase
+     */
+    public groupMode: string = "AUTO";
+
+    /**
+     * 分组方法
+     * 
+     * @memberof AutoGroupListBase
+     */
+    public group(){
+        let _this:any = this;
+        if(_this.drawGroup && _this.drawGroup instanceof Function && Object.is(_this.groupMode,"AUTO")){
+            _this.drawGroup();
+        }else if(_this.drawCodelistGroup && _this.drawCodelistGroup instanceof Function && Object.is(_this.groupMode,"CODELIST")){
+            _this.drawCodelistGroup();
+        }
+    }
+
+
+    /**
+     * 绘制分组列表
+     * 
+     * @memberof AutoGroupListBase
+     */
+    public drawGroup(){
+        let data:Array<any> = [...this.items];
+        let groups:Array<any> = [];
+        data.forEach((item: any)=>{
+            if(item.hasOwnProperty(this.groupField)){
+                groups.push(item[this.groupField]);
+            }
+        });
+        groups = [...new Set(groups)];
+        if(groups.length == 0){
+            console.warn("分组数据无效");
+        }
+        let groupTree:Array<any> = [];
+        groups.forEach((group: any,i: number)=>{
+            let children:Array<any> = [];
+            data.forEach((item: any,j: number)=>{
+                if(Object.is(group,item[this.groupField])){
+                    children.push(item);
+                }
+            });
+            group = group ? group : this.$t('app.commonWords.other');
+            const tree: any ={
+                group: group,
+                children: children
+            }
+            groupTree.push(tree);
+        });
+        this.groupData = [...groupTree];
+    }
+
+
+
+    /**
+     * 当前页
+     *
+     * @type {number}
+     * @memberof AutoGroupListBase
+     */
+    public curPage: number = 1;
+
+    /**
+     * 数据
+     *
+     * @type {any[]}
+     * @memberof AutoGroupListBase
+     */
+    public items: any[] = [];
+
+    /**
+     * 是否支持分页
+     *
+     * @type {boolean}
+     * @memberof AutoGroupListBase
+     */
+    public isEnablePagingBar: boolean = true;
+
+    /**
+     * 分页条数
+     *
+     * @type {number}
+     * @memberof AutoGroupListBase
+     */
+    public limit: number = 1000;
+
+    /**
+     * 总条数
+     *
+     * @type {number}
+     * @memberof AutoGroupListBase
+     */
+    public totalRecord: number = 0;
+
+    /**
+     * 加载的数据是否附加在items之后
+     *
+     * @type {boolean}
+     * @memberof AutoGroupListBase
+     */
+    public isAddBehind:boolean = false;
+
+    /**
+     * 是否有滚动条
+     *
+     * @type {boolean}
+     * @memberof AutoGroupListBase
+     */
+    public isScrollBar: boolean = false;
+
+    /**
+     * 排序方向
+     *
+     * @type {string}
+     * @memberof AutoGroupListBase
+     */    
+    public sortDir:string = '';
+
+    /**
+     * 排序字段
+     *
+     * @type {string}
+     * @memberof AutoGroupListBase
+     */    
+    public sortField: string = '';
+
+    /**
+     * 选中数组
+     * @type {Array<any>}
+     * @memberof AutoGroupListBase
+     */
+    public selections: Array<any> = [];
+
+    /**
+     * 应用状态事件
+     *
+     * @public
+     * @type {(Subscription | undefined)}
+     * @memberof AutoGroupListBase
+     */
+    public appStateEvent: Subscription | undefined;
+
+     /**
+     * Vue声明周期，组件挂载完毕
+     *
+     * @memberof AutoGroupListBase
+     */
+    public mounted () {
+        this.afterMounted();
+    }
+
+    /**
+     * 执行mounted后的逻辑
+     *
+     * @memberof AutoGroupListBase
+     */
+    public afterMounted () {
+        const loadMoreCallBack:any = this.throttle(this.loadMore,3000);
+        this.$el.addEventListener('scroll', ()=> {
+            if(this.$el.scrollHeight > this.$el.clientHeight) {
+                this.isScrollBar = true;
+            } else {
+                this.isScrollBar = false;
+            }
+            if( this.$el.scrollTop +  this.$el.clientHeight  >=  this.$el.scrollHeight) {
+                loadMoreCallBack();
+            }
+        })
+    }
+
+    /**
+     * Vue声明周期，组件创建完毕
+     *
+     * @memberof AutoGroupListBase
+     */
+    public created() {
+        this.afterCreated()
+    }
+
+    /**
+     * 执行created后的逻辑
+     *
+     *  @memberof AutoGroupListBase
+     */    
+    public afterCreated(){
+        if (this.viewState) {
+            this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
+                if (!Object.is(this.name, tag)) {
+                    return;
+                }
+                if (Object.is(action,'load')) {
+                    this.curPage = 1;
+                    this.items = [];
+                    this.load(data);
+                }
+                if (Object.is(action,'refresh')) {
+                    this.refresh(data);
+                }
+            });
+        }
+        if(AppCenterService && AppCenterService.getMessageCenter()){
+            this.appStateEvent = AppCenterService.getMessageCenter().subscribe(({ name, action, data }) =>{
+                if(!Object.is(name,"IBIZBOOK")){
+                    return;
+                }
+                if(Object.is(action,'appRefresh')){
+                    this.refresh([data]);
+                }
+            })
+        }
+    }    
+
+    /**
+     * vue 生命周期
+     *
+     * @memberof AutoGroupListBase
+     */
+    public destroyed() {
+        this.afterDestroy();
+    }
+
+    /**
+     * 执行destroyed后的逻辑
+     *
+     * @memberof AutoGroupListBase
+     */
+    public afterDestroy() {
+        if (this.viewStateEvent) {
+            this.viewStateEvent.unsubscribe();
+        }
+        if(this.appStateEvent){
+            this.appStateEvent.unsubscribe();
+        }
+    }    
+
+    /**
+    * 加载更多
+    *
+    * @memberof AutoGroupListBase
+    */
+    public loadMore(){
+        if(this.totalRecord>this.items.length){
+            this.curPage = ++this.curPage;
+            this.isAddBehind = true;
+            this.load({});
+        }
+    }
+
+    /**
+     * 刷新
+     *
+     * @param {*} [args={}]
+     * @memberof Main
+     */
+    public refresh(args?: any) {
+        this.isAddBehind = true;
+        this.load(args);
+    }
+
+    /**
+     * 列表数据加载
+     *
+     * @public
+     * @param {*} [arg={}]
+     * @memberof AutoGroupListBase
+     */
+    public load(opt: any = {}): void {
+        if(!this.fetchAction){
+            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKAutoGroupListView' + (this.$t('app.list.notConfig.fetchAction') as string) });
+            return;
+        }        
+        const arg: any = {...opt};
+        const page: any = {};
+        if (this.isEnablePagingBar) {
+            Object.assign(page, { page: this.curPage-1, size: this.limit });
+        }
+        // 设置排序
+        if (!Object.is(this.sortDir, '') && !Object.is(this.sortField, '')) {
+          const sort: string = this.sortField+","+this.sortDir;
+            Object.assign(page, { sort: sort });
+        }
+        Object.assign(arg, page);
+        const parentdata: any = {};
+        this.$emit('beforeload', parentdata);
+        Object.assign(arg, parentdata);
+        let tempViewParams:any = parentdata.viewparams?parentdata.viewparams:{};
+        if(this.viewparams){
+            Object.assign(tempViewParams,JSON.parse(JSON.stringify(this.viewparams)));
+        }
+        Object.assign(arg,{viewparams:tempViewParams});
+        const post: Promise<any> = this.service.search(this.fetchAction, this.context?JSON.parse(JSON.stringify(this.context)):{}, arg, this.showBusyIndicator);
+        post.then((response: any) => {
+            if (!response || response.status !== 200) {
+                if (response.errorMessage) {
+                    this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.errorMessage });
+                }
+                return;
+            }
+            const data: any = response.data;
+            if(!this.isAddBehind){
+                this.items = [];
+            }
+            if (data && data.length > 0) {
+                let datas = JSON.parse(JSON.stringify(data));
+                datas.map((item: any) => {
+                    Object.assign(item, { isselected: false });
+                });
+                this.totalRecord = response.total;
+                this.items.push(...datas);
+                this.items = this.arrayNonRepeatfy(this.items);
+            }
+            this.isAddBehind = false;
+            this.$emit('load', this.items);
+            //在导航视图中，如已有选中数据，则右侧展开已选中数据的视图，如无选中数据则默认选中第一条
+            if(this.isSelectFirstDefault){
+                if(this.selections && this.selections.length > 0){
+                    this.selections.forEach((select: any)=>{
+                        const index = this.items.findIndex((item:any) => Object.is(item.srfkey,select.srfkey));
+                        if(index != -1){
+                            this.handleClick(this.items[index]);
+                        }
+                    })
+                }else{
+                    this.handleClick(this.items[0]);
+                } 
+            }
+            this.group();
+        }, (response: any) => {
+            if (response && response.status === 401) {
+                return;
+            }
+            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.errorMessage });
+        });
+    }
+
+    /**
+     * 列表数据去重
+     *
+     * @param {Array<any>} [arr]
+     * @returns {void}
+     * @memberof AutoGroupListBase
+     */
+    public arrayNonRepeatfy(arr:Array<any>) {
+        let map = new Map();
+        let array = new Array();
+        for (let i = 0; i < arr.length; i++) {
+            map .set(arr[i].srfkey, arr[i]); 
+        }
+        map.forEach((value:any, key:string, map:any) => {
+            array.push(value);
+        });
+        return array ;
+    }
+
+    /**
+     * 节流
+     *
+     * @param {Array<any>} [arr]
+     * @returns {void}
+     * @memberof AutoGroupListBase
+     */
+    public throttle(fn:any, wait:number){
+        let time = 0;
+        return () =>{
+          let now = Date.now()
+          let args = arguments;
+          if(now - time > wait){
+            fn.apply(this, args)
+            time = now;
+          }
+        }
+    }
+
+    /**
+     * 删除
+     *
+     * @param {any[]} datas
+     * @returns {Promise<any>}
+     * @memberof AutoGroupListBase
+     */
+    public async remove(datas: any[]): Promise<any> {
+        if(!this.removeAction){
+            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKAutoGroupListView' + (this.$t('app.list.notConfig.removeAction') as string) });
+            return;
+        }
+        if (datas.length === 0) {
+            return;
+        }
+        let dataInfo = '';
+        datas.forEach((record: any, index: number) => {
+            let srfmajortext = record.srfmajortext;
+            if (index < 5) {
+                if (!Object.is(dataInfo, '')) {
+                    dataInfo += '、';
+                }
+                dataInfo += srfmajortext;
+            } else {
+                return false;
+            }
+        });
+
+        if (datas.length < 5) {
+            dataInfo = dataInfo + ' 共' + datas.length + '条数据';
+        } else {
+            dataInfo = dataInfo + '...' + ' 共' + datas.length + '条数据';
+        }
+
+        const removeData = () => {
+            let keys: any[] = [];
+            datas.forEach((data: any) => {
+                keys.push(data.srfkey); 
+            });
+            let _removeAction = keys.length > 1 ? 'removeBatch' : this.removeAction ;
+            const context:any = JSON.parse(JSON.stringify(this.context));
+            const post: Promise<any> = this.service.delete(_removeAction,Object.assign(context,{ ibizbook: keys.join(';') }),Object.assign({ ibizbook: keys.join(';') },{viewparams:this.viewparams}), this.showBusyIndicator);
+            return new Promise((resolve: any, reject: any) => {
+                post.then((response: any) => {
+                    if (!response || response.status !== 200) {
+                        this.$Notice.error({ title: '', desc: (this.$t('app.commonWords.delDataFail') as string) + ',' + response.info });
+                        return;
+                    } else {
+                        this.$Notice.success({ title: '', desc: (this.$t('app.commonWords.deleteSuccess') as string) });
+                    }
+                    //删除items中已删除的项
+                    datas.forEach((data: any) => {
+                        this.items.some((item:any,index:number)=>{
+                            if(Object.is(item.srfkey,data.srfkey)){
+                                this.items.splice(index,1);
+                                this.group();
+                                return true;
+                            }
+                        });
+                    });
+                    this.$emit('remove', null);
+                    this.selections = [];
+                    resolve(response);
+                }).catch((response: any) => {
+                    if (response && response.status === 401) {
+                        return;
+                    }
+                    if (!response || !response.status || !response.data) {
+                        this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: (this.$t('app.commonWords.sysException') as string) });
+                        reject(response);
+                        return;
+                    }
+                    reject(response);
+                });
+            });
+        }
+
+        dataInfo = dataInfo.replace(/[null]/g, '').replace(/[undefined]/g, '').replace(/[ ]/g, '');
+        this.$Modal.confirm({
+            title: (this.$t('app.commonWords.warning') as string),
+            content: (this.$t('app.list.confirmDel') as string) + ' ' + dataInfo + '，' + (this.$t('app.list.notRecoverable') as string) ,
+            onOk: () => {
+                removeData();
+            },
+            onCancel: () => { }
+        });
+        return removeData;
+    }
+
+    /**
+     * 保存
+     *
+     * @param {*} $event
+     * @returns {Promise<any>}
+     * @memberof AutoGroupListBase
+     */
+    public async save(args: any[], params?: any, $event?: any, xData?: any){
+        let _this = this;
+        let successItems:any = [];
+        let errorItems:any = [];
+        let errorMessage:any = [];
+        for (const item of _this.items) {
+            try {
+                if(Object.is(item.rowDataState, 'create')){
+                    if(!this.createAction){
+                        this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKAutoGroupListView' + (this.$t('app.list.notConfig.createAction') as string) });
+                    }else{
+                      Object.assign(item,{viewparams:this.viewparams});
+                      let response = await this.service.add(this.createAction, JSON.parse(JSON.stringify(this.context)),item, this.showBusyIndicator);
+                      successItems.push(JSON.parse(JSON.stringify(response.data)));
+                    }
+                }else if(Object.is(item.rowDataState, 'update')){
+                    if(!this.updateAction){
+                        this.$Notice.error({ title: (this.$t('app.commonWords.warning') as string), desc: 'IBIZBOOKAutoGroupListView' + (this.$t('app.list.notConfig.updateAction') as string) });
+                    }else{
+                        Object.assign(item,{viewparams:this.viewparams});
+                        if(item.ibizbook){
+                            Object.assign(this.context,{ibizbook:item.ibizbook});
+                        }
+                        let response = await this.service.add(this.updateAction,JSON.parse(JSON.stringify(this.context)),item, this.showBusyIndicator);
+                        successItems.push(JSON.parse(JSON.stringify(response.data)));
+                    }
+                }
+            } catch (error) {
+                errorItems.push(JSON.parse(JSON.stringify(item)));
+                errorMessage.push(error);
+            }
+        }
+        this.$emit('save', successItems);
+        this.refresh();
+        if(errorItems.length === 0){
+            this.$Notice.success({ title: '', desc: (this.$t('app.commonWords.saveSuccess') as string) });
+        }else{
+          errorItems.forEach((item:any,index:number)=>{
+            this.$Notice.error({ title: (this.$t('app.commonWords.saveFailed') as string), desc: item.majorentityname+ (this.$t('app.commonWords.saveFailed') as string) + '!' });
+            console.error(errorMessage[index]);
+          });
+        }
+        return successItems;
+    }
+
+    /**
+     * 面板数据变化处理事件
+     * @param {any} item 当前列数据
+     * @param {any} $event 面板事件数据
+     *
+     * @memberof AutoGroupListBase
+     */
+    public onPanelDataChange(item:any,$event:any) {
+        Object.assign(item, $event, {rowDataState:'update'});
+    }
+
+    /**
+     * 选择数据
+     * @memberof AutoGroupListBase
+     *
+     */
+    public handleClick(args: any) {
+        this.clearSelection();
+        args.isselected = !args.isselected;
+        this.selectchange();
+    }
+
+    /**
+     * 双击数据
+     * @memberof AutoGroupListBase
+     *
+     */
+    public handleDblClick(args: any) {
+        this.$emit('rowdblclick', args);
+    }
+
+    /**
+     * 触发事件
+     * @memberof AutoGroupListBase
+     *
+     */
+    public selectchange() {
+        this.selections = [];
+        this.items.map((item: any) => {
+            if (item.isselected) {
+                this.selections.push(item);
+            }
+        });
+        this.$emit('selectionchange', this.selections);
+    }
+
+    /**
+     * 清除当前所有选中状态
+     *
+     * @memberof AutoGroupListBase
+     */
+    public clearSelection(){
+        this.items.map((item: any) => {
+            Object.assign(item, { isselected: false });
+        }); 
+    }
+
+    /**
+     * 操作栏模型数据
+     *
+     * @type {*}
+     * @memberof AutoGroupListBase
+     */ 
+    public ActionModel:any ={
+    };
+
+    /**
+     * 操作列界面行为
+     *
+     * @param {*} data
+     * @param {*} tag
+     * @param {*} $event
+     * @memberof AutoGroupListBase
+     */
+	public uiAction(data: any, tag: any, $event: any) {
+        $event.stopPropagation();
+    }
+
+}
+</script>
+
+<style lang='less'>
+@import './auto-group-list-list.less';
+</style>
\ No newline at end of file

app_Web/src/widgets/ibizbook/auto-group-list-list/auto-group-list-list-model.ts

+/**
+ * AutoGroupList 部件模型
+ *
+ * @export
+ * @class AutoGroupListModel
+ */
+export default class AutoGroupListModel {
+
+	/**
+	 * 获取数据项集合
+	 *
+	 * @returns {any[]}
+	 * @memberof AutoGroupListListMode
+	 */
+	public getDataItems(): any[] {
+		return [
+			{
+				name: 'ibizbookname',
+			},
+			{
+				name: 'booknumber',
+			},
+			{
+				name: 'price',
+			},
+			{
+				name: 'press',
+			},
+			{
+				name: 'ibizbookid',
+			},
+			{
+				name: 'author',
+			},
+			{
+				name: 'type',
+			},
+			{
+				name: 'srfkey',
+				prop: 'ibizbookid',
+				dataType: 'GUID',
+			},
+			{
+				name: 'srfmajortext',
+				prop: 'ibizbookname',
+				dataType: 'TEXT',
+			},
+			{
+				name: 'ibizbook',
+				prop: 'ibizbookid',
+				dataType: 'FONTKEY',
+			},
+
+      {
+        name:'size',
+        prop:'size'
+      },
+      {
+        name:'query',
+        prop:'query'
+      },
+      {
+        name:'sort',
+        prop:'sort'
+      },
+      {
+        name:'page',
+        prop:'page'
+      },
+      // 前端新增修改标识，新增为"0",修改为"1"或未设值
+      {
+        name: 'srffrontuf',
+        prop: 'srffrontuf',
+        dataType: 'TEXT',
+      },
+		]
+	}
+
+}
\ No newline at end of file

app_Web/src/widgets/ibizbook/auto-group-list-list/auto-group-list-list-service.ts

+import { Http,Util,Errorlog } from '@/utils';
+import ControlService from '@/widgets/control-service';
+import IBIZBOOKService from '@/service/ibizbook/ibizbook-service';
+import AutoGroupListModel from './auto-group-list-list-model';
+
+
+/**
+ * AutoGroupList 部件服务对象
+ *
+ * @export
+ * @class AutoGroupListService
+ */
+export default class AutoGroupListService extends ControlService {
+
+    /**
+     * 图书服务对象
+     *
+     * @type {IBIZBOOKService}
+     * @memberof AutoGroupListService
+     */
+    public appEntityService: IBIZBOOKService = new IBIZBOOKService({ $store: this.getStore() });
+
+    /**
+     * 设置从数据模式
+     *
+     * @type {boolean}
+     * @memberof AutoGroupListService
+     */
+    public setTempMode(){
+        this.isTempMode = false;
+    }
+
+    /**
+     * Creates an instance of AutoGroupListService.
+     * 
+     * @param {*} [opts={}]
+     * @memberof AutoGroupListService
+     */
+    constructor(opts: any = {}) {
+        super(opts);
+        this.model = new AutoGroupListModel();
+    }
+
+    /**
+     * 查询数据
+     *
+     * @param {string} action
+     * @param {*} [context={}]
+     * @param {*} [data={}]
+     * @param {boolean} [isloading]
+     * @returns {Promise<any>}
+     * @memberof AutoGroupListService
+     */
+    @Errorlog
+    public search(action: string, context: any = {},data: any = {}, isloading?: boolean): Promise<any> {
+        const {data:Data,context:Context} = this.handleRequestData(action,context,data,true);
+        return new Promise((resolve: any, reject: any) => {
+            const _appEntityService: any = this.appEntityService;
+            let result: Promise<any>;
+            if (_appEntityService[action] && _appEntityService[action] instanceof Function) {
+                result = _appEntityService[action](Context,Data, isloading);
+            }else{
+                result =_appEntityService.FetchDefault(Context,Data, isloading);
+            }
+            result.then(async (response) => {
+                await this.handleResponse(action, response);
+                resolve(response);
+            }).catch(response => {
+                reject(response);
+            });      
+        });
+    }
+
+    /**
+     * 删除数据
+     *
+     * @param {string} action
+     * @param {*} [context={}]
+     * @param {*} [data={}]
+     * @param {boolean} [isloading]
+     * @returns {Promise<any>}
+     * @memberof AutoGroupListService
+     */
+    @Errorlog
+    public delete(action: string, context: any = {},data: any = {}, isloading?: boolean): Promise<any> {
+        const {data:Data,context:Context} = this.handleRequestData(action,context,data,true);
+        return new Promise((resolve: any, reject: any) => {
+            const _appEntityService: any = this.appEntityService;
+            let result: Promise<any>;
+            if (_appEntityService[action] && _appEntityService[action] instanceof Function) {
+                result = _appEntityService[action](Context,Data, isloading);
+            }else{
+                result =_appEntityService.remove(Context,Data , isloading);
+            }
+            result.then((response) => {
+                this.handleResponse(action, response);
+                resolve(response);
+            }).catch(response => {
+                reject(response);
+            });      
+        });
+    }
+
+    /**
+     * 添加数据
+     *
+     * @param {string} action
+     * @param {*} [context={}]
+     * @param {*} [data={}]
+     * @param {boolean} [isloading]
+     * @returns {Promise<any>}
+     * @memberof AutoGroupListService
+     */
+    @Errorlog
+    public add(action: string, context: any = {},data: any = {}, isloading?: boolean): Promise<any> {
+        const {data:Data,context:Context} = this.handleRequestData(action,context,data,true);
+        return new Promise((resolve: any, reject: any) => {
+            const _appEntityService: any = this.appEntityService;
+            let result: Promise<any>;
+            if (_appEntityService[action] && _appEntityService[action] instanceof Function) {
+                result = _appEntityService[action](Context,Data, isloading);
+            }else{
+                result =_appEntityService.Create(Context,Data, isloading);
+            }
+            result.then((response) => {
+                this.handleResponse(action, response);
+                resolve(response);
+            }).catch(response => {
+                reject(response);
+            });      
+        });
+    }
+
+    /**
+     * 修改数据
+     *
+     * @param {string} action
+     * @param {*} [context={}]
+     * @param {*} [data={}]
+     * @param {boolean} [isloading]
+     * @returns {Promise<any>}
+     * @memberof AutoGroupListService
+     */
+    @Errorlog
+    public update(action: string, context: any = {},data: any = {}, isloading?: boolean): Promise<any> {
+        const {data:Data,context:Context} = this.handleRequestData(action,context,data,true);
+        return new Promise((resolve: any, reject: any) => {
+            const _appEntityService: any = this.appEntityService;
+            let result: Promise<any>;
+            if (_appEntityService[action] && _appEntityService[action] instanceof Function) {
+                result = _appEntityService[action](Context,Data,isloading);
+            }else{
+                result =_appEntityService.Update(Context,Data,isloading);
+            }
+            result.then((response) => {
+                this.handleResponse(action, response);
+                resolve(response);
+            }).catch(response => {
+                reject(response);
+            });      
+        });
+    }
+}
\ No newline at end of file

app_Web/src/widgets/ibizbook/auto-group-list-list/auto-group-list-list.less

+// this is less
+
+.app-list {
+    height:100%;
+    flex-grow: 1;
+    overflow-y: auto;
+    .el-collapse-item__header.is-active{
+        color: #409eff;
+        background-color: #ecf5ff;
+    }
+    .app-list-item {
+        line-height: 34px;
+        border-radius:5px;
+        padding: 6px;
+        margin: 6px;
+        box-shadow: 0px 0px 2px 1px rgb(209, 208, 208);
+        background: #f7f7fa;
+        min-height: 24px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .app-list-item.isSelect {
+        background: #ecf5ff;
+        border-left: 5px solid #2d8cf0;
+        box-shadow: 0px 0px 3px 1px #82bff7;
+    }
+    .app-list-item:hover {
+        background: #ecf5ff;
+    }
+    .loadmore {
+        text-align: center;
+        padding: 10px;
+        text-decoration: underline;
+        color: #82bff7;
+        cursor: default;
+    }
+}
+.app-list-empty {
+    height:100%;
+    color: #909399;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

app_Web/src/widgets/ibizbook/auto-group-list-list/auto-group-list-list.vue

+<script lang='tsx'>
+import { Component } from 'vue-property-decorator';
+import AutoGroupListBase from './auto-group-list-list-base.vue';
+
+ 
+@Component({
+    components: {
+         
+    }
+})
+export default class AutoGroupList extends AutoGroupListBase {
+
+}
+</script>
\ No newline at end of file

app_Web/src/widgets/ibizbook/has-panel-list-list/has-panel-list-list-base.vue

+<template>  
+    <div :class="['app-list',this.items.length > 0 ? '' : 'app-list-empty' ]">
+        <div v-if="items.length > 0">
+            <div v-for = "item in items" :key="item.srfkey"  :class="['app-list-item', {'isSelect': item.isselected === true ? true : false}]" @click="handleClick(item)"  @dblclick="handleDblClick(item)">
+                                <layout_list_itempanel 
+                  :viewState="viewState"  
+                  :viewparams="viewparams" 
+                  :context="context" 
+                  :parentRef="thisRef"
+                  :inputData="item"
+                  @panelDataChange="($event)=>{onPanelDataChange(item,$event)}"
+                  name="list_itempanel"  
+                  ref='list_itempanel'>
+                </layout_list_itempanel>
+            </div>
+            <template v-if="isScrollBar">
+            <div v-if="totalRecord>items.length" class="loadmore">{{ this.$t('app.commonWords.loadmore') }}</div>
+            <div v-else class="loadmore">{{ this.$t('app.commonWords.nomore') }}</div>
+            </template>
+        </div>
+        <div v-else>
+            {{ $t('entities.ibizbook.haspanellist_list.nodata') }}
+        </div>
+        <el-backtop target=".content-container .app-list"></el-backtop>
+    </div>
+</template>
+<script lang='tsx'>
+import { Vue, Component, Prop, Provide, Emit, Watch, Model,Inject } from 'vue-property-decorator';
+import { CreateElement } from 'vue';
+import { Subject, Subscription } from 'rxjs';
+import { ControlInterface } from '@/interface/control';
+import { UIActionTool,Util,ViewTool } from '@/utils';
+import NavDataService from '@/service/app/navdata-service';
+import AppCenterService from "@service/app/app-center-service";
+import IBIZBOOKService from '@/service/ibizbook/ibizbook-service';
+import HasPanelListService from './has-panel-list-list-service';
+import IBIZBOOKUIService from '@/uiservice/ibizbook/ibizbook-ui-service';
+import CodeListService from "@/codelist/codelist-service";
+
+
+@Component({
+    components: {
+      
+    }
+})
+export default class HasPanelListBase extends Vue implements ControlInterface {
+
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof HasPanelListBase
+     */
+    @Prop() public name?: string;
+
+    /**
+     * 视图通讯对象
+     *
+     * @type {Subject<ViewState>}
+     * @memberof HasPanelListBase
+     */
+    @Prop() public viewState!: Subject<ViewState>;
+
+    /**
+     * 应用上下文
+     *
+     * @type {*}
+     * @memberof HasPanelListBase
+     */
+    @Prop() public context: any;
+
+    /**
+     * 视图参数
+     *
+     * @type {*}
+     * @memberof HasPanelListBase
+     */
+    @Prop() public viewparams: any;
+
+    /**
+     * 视图状态事件
+     *
+     * @public
+     * @type {(Subscription | undefined)}
+     * @memberof HasPanelListBase
+     */
+    public viewStateEvent: Subscription | undefined;
+
+    /**
+     * 获取部件类型
+     *
+     * @returns {string}
+     * @memberof HasPanelListBase
+     */
+    public getControlType(): string {
+        return 'LIST'
+    }
+
+
+
+    /**
+     * 计数器服务对象集合
+     *
+     * @type {Array<*>}
+     * @memberof HasPanelListBase
+     */    
+    public counterServiceArray:Array<any> = [];
+
+    /**
+     * 建构部件服务对象
+     *
+     * @type {HasPanelListService}
+     * @memberof HasPanelListBase
+     */
+    public service: HasPanelListService = new HasPanelListService({ $store: this.$store });
+
+    /**
+     * 实体服务对象
+     *
+     * @type {IBIZBOOKService}
+     * @memberof HasPanelListBase
+     */
+    public appEntityService: IBIZBOOKService = new IBIZBOOKService({ $store: this.$store });
+    
+
+
+    /**
+     * 转化数据
+     *
+     * @param {any} args
+     * @memberof  HasPanelListBase
+     */
+    public transformData(args: any) {
+        let _this: any = this;
+        if(_this.service && _this.service.handleRequestData instanceof Function && _this.service.handleRequestData('transform',_this.context,args)){
+            return _this.service.handleRequestData('transform',_this.context,args)['data'];
+        }
+    }
+
+    /**
+     * 关闭视图
+     *
+     * @param {any} args
+     * @memberof HasPanelListBase
+     */
+    public closeView(args: any): void {
+        let _this: any = this;
+        _this.$emit('closeview', [args]);
+    }
+
+    /**
+     *  计数器刷新
+     *
+     * @memberof HasPanelListBase
+     */
+    public counterRefresh(){
+        const _this:any =this;
+        if(_this.counterServiceArray && _this.counterServiceArray.length >0){
+            _this.counterServiceArray.forEach((item:any) =>{
+                if(item.refreshData && item.refreshData instanceof Function){
+                    item.refreshData();
+                }
+            })
+        }
+    }
+
+
+
+    /**
+     * 获取多项数据
+     *
+     * @returns {any[]}
+     * @memberof HasPanelListBase
+     */
+    public getDatas(): any[] {
+        return this.selections;
+    }
+
+    /**
+     * 获取单项树
+     *
+     * @returns {*}
+     * @memberof HasPanelListBase
+     */
+    public getData(): any {
+        return null;
+    }
+
+    /**
+     * 是否默认选中第一条数据
+     *
+     * @type {boolean}
+     * @memberof HasPanelListBase
+     */
+    @Prop({ default: false }) public isSelectFirstDefault!: boolean;
+
+    /**
+     * 显示处理提示
+     *
+     * @type {boolean}
+     * @memberof HasPanelListBase
+     */
+    @Prop({ default: true }) public showBusyIndicator?: boolean;
+
+    /**
+     * 部件行为--create
+     *
+     * @type {string}
+     * @memberof HasPanelListBase
+     */
+    @Prop() public createAction!: string;
+
+    /**
+     * 部件行为--remove
+     *
+     * @type {string}
+     * @memberof HasPanelListBase
+     */
+    @Prop() public removeAction!: string;
+
+    /**
+     * 部件行为--update
+     *
+     * @type {string}
+     * @memberof HasPanelListBase
+     */
+    @Prop() public updateAction!: string;
+
+    /**
+     * 部件行为--fetch
+     *
+     * @type {string}
+     * @memberof HasPanelListBase
+     */
+    @Prop() public fetchAction!: string;
+
+    /**
+     * 打开新建数据视图
+     *
+     * @type {any}
+     * @memberof HasPanelListBase
+     */
+    @Prop() public newdata: any;
+    /**
+     * 打开编辑数据视图
+     *
+     * @type {any}
+     * @memberof HasPanelListBase
+     */
+    @Prop() public opendata: any;
+
+    /**
+     * this引用
+     *
+     * @type {number}
+     * @memberof HasPanelListBase
+     */
+    public thisRef: any = this;
+
+
+
+
+
+
+    /**
+     * 当前页
+     *
+     * @type {number}
+     * @memberof HasPanelListBase
+     */
+    public curPage: number = 1;
+
+    /**
+     * 数据
+     *
+     * @type {any[]}
+     * @memberof HasPanelListBase
+     */
+    public items: any[] = [];
+
+    /**
+     * 是否支持分页
+     *
+     * @type {boolean}
+     * @memberof HasPanelListBase
+     */
+    public isEnablePagingBar: boolean = true;
+
+    /**
+     * 分页条数
+     *
+     * @type {number}
+     * @memberof HasPanelListBase
+     */
+    public limit: number = 1000;
+
+    /**
+     * 总条数
+     *
+     * @type {number}
+     * @memberof HasPanelListBase
+     */
+    public totalRecord: number = 0;
+
+    /**
+     * 加载的数据是否附加在items之后
+     *
+     * @type {boolean}
+     * @memberof HasPanelListBase
+     */
+    public isAddBehind:boolean = false;
+
+    /**
+     * 是否有滚动条
+     *
+     * @type {boolean}
+     * @memberof HasPanelListBase
+     */
+    public isScrollBar: boolean = false;
+
+    /**
+     * 排序方向
+     *
+     * @type {string}
+     * @memberof HasPanelListBase
+     */    
+    public sortDir:string = '';
+
+    /**
+     * 排序字段
+     *
+     * @type {string}
+     * @memberof HasPanelListBase
+     */    
+    public sortField: string = '';
+
+    /**
+     * 选中数组
+     * @type {Array<any>}
+     * @memberof HasPanelListBase
+     */
+    public selections: Array<any> = [];
+
+    /**
+     * 应用状态事件
+     *
+     * @public
+     * @type {(Subscription | undefined)}
+     * @memberof HasPanelListBase
+     */
+    public appStateEvent: Subscription | undefined;
+
+     /**
+     * Vue声明周期，组件挂载完毕
+     *
+     * @memberof HasPanelListBase
+     */
+    public mounted () {
+        this.afterMounted();
+    }
+
+    /**
+     * 执行mounted后的逻辑
+     *
+     * @memberof HasPanelListBase
+     */
+    public afterMounted () {
+        const loadMoreCallBack:any = this.throttle(this.loadMore,3000);
+        this.$el.addEventListener('scroll', ()=> {
+            if(this.$el.scrollHeight > this.$el.clientHeight) {
+                this.isScrollBar = true;
+            } else {
+                this.isScrollBar = false;
+            }
+            if( this.$el.scrollTop +  this.$el.clientHeight  >=  this.$el.scrollHeight) {
+                loadMoreCallBack();
+            }
+        })
+    }
+
+    /**
+     * Vue声明周期，组件创建完毕
+     *
+     * @memberof HasPanelListBase
+     */
+    public created() {
+        this.afterCreated()
+    }
+
+    /**
+     * 执行created后的逻辑
+     *
+     *  @memberof HasPanelListBase
+     */    
+    public afterCreated(){
+        if (this.viewState) {
+            this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
+                if (!Object.is(this.name, tag)) {
+                    return;
+                }
+                if (Object.is(action,'load')) {
+                    this.curPage = 1;
+                    this.items = [];
+                    this.load(data);
+                }
+                if (Object.is(action,'refresh')) {
+                    this.refresh(data);
+                }
+            });
+        }
+        if(AppCenterService && AppCenterService.getMessageCenter()){
+            this.appStateEvent = AppCenterService.getMessageCenter().subscribe(({ name, action, data }) =>{
+                if(!Object.is(name,"IBIZBOOK")){
+                    return;
+                }
+                if(Object.is(action,'appRefresh')){
+                    this.refresh([data]);
+                }
+            })
+        }
+    }    
+
+    /**
+     * vue 生命周期
+     *
+     * @memberof HasPanelListBase
+     */
+    public destroyed() {
+        this.afterDestroy();
+    }
+
+    /**
+     * 执行destroyed后的逻辑
+     *
+     * @memberof HasPanelListBase
+     */
+    public afterDestroy() {
+        if (this.viewStateEvent) {
+            this.viewStateEvent.unsubscribe();
+        }
+        if(this.appStateEvent){
+            this.appStateEvent.unsubscribe();
+        }
+    }    
+
+    /**
+    * 加载更多
+    *
+    * @memberof HasPanelListBase
+    */
+    public loadMore(){
+        if(this.totalRecord>this.items.length){
+            this.curPage = ++this.curPage;
+            this.isAddBehind = true;
+            this.load({});
+        }
+    }
+
+    /**
+     * 刷新
+     *
+     * @param {*} [args={}]
+     * @memberof Main
+     */
+    public refresh(args?: any) {
+        this.isAddBehind = true;
+        this.load(args);
+    }
+
+    /**
+     * 列表数据加载
+     *
+     * @public
+     * @param {*} [arg={}]
+     * @memberof HasPanelListBase
+     */
+    public load(opt: any = {}): void {
+        if(!this.fetchAction){
+            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKHasPanelListView' + (this.$t('app.list.notConfig.fetchAction') as string) });
+            return;
+        }        
+        const arg: any = {...opt};
+        const page: any = {};
+        if (this.isEnablePagingBar) {
+            Object.assign(page, { page: this.curPage-1, size: this.limit });
+        }
+        // 设置排序
+        if (!Object.is(this.sortDir, '') && !Object.is(this.sortField, '')) {
+          const sort: string = this.sortField+","+this.sortDir;
+            Object.assign(page, { sort: sort });
+        }
+        Object.assign(arg, page);
+        const parentdata: any = {};
+        this.$emit('beforeload', parentdata);
+        Object.assign(arg, parentdata);
+        let tempViewParams:any = parentdata.viewparams?parentdata.viewparams:{};
+        if(this.viewparams){
+            Object.assign(tempViewParams,JSON.parse(JSON.stringify(this.viewparams)));
+        }
+        Object.assign(arg,{viewparams:tempViewParams});
+        const post: Promise<any> = this.service.search(this.fetchAction, this.context?JSON.parse(JSON.stringify(this.context)):{}, arg, this.showBusyIndicator);
+        post.then((response: any) => {
+            if (!response || response.status !== 200) {
+                if (response.errorMessage) {
+                    this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.errorMessage });
+                }
+                return;
+            }
+            const data: any = response.data;
+            if(!this.isAddBehind){
+                this.items = [];
+            }
+            if (data && data.length > 0) {
+                let datas = JSON.parse(JSON.stringify(data));
+                datas.map((item: any) => {
+                    Object.assign(item, { isselected: false });
+                });
+                this.totalRecord = response.total;
+                this.items.push(...datas);
+                this.items = this.arrayNonRepeatfy(this.items);
+            }
+            this.isAddBehind = false;
+            this.$emit('load', this.items);
+            //在导航视图中，如已有选中数据，则右侧展开已选中数据的视图，如无选中数据则默认选中第一条
+            if(this.isSelectFirstDefault){
+                if(this.selections && this.selections.length > 0){
+                    this.selections.forEach((select: any)=>{
+                        const index = this.items.findIndex((item:any) => Object.is(item.srfkey,select.srfkey));
+                        if(index != -1){
+                            this.handleClick(this.items[index]);
+                        }
+                    })
+                }else{
+                    this.handleClick(this.items[0]);
+                } 
+            }
+        }, (response: any) => {
+            if (response && response.status === 401) {
+                return;
+            }
+            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.errorMessage });
+        });
+    }
+
+    /**
+     * 列表数据去重
+     *
+     * @param {Array<any>} [arr]
+     * @returns {void}
+     * @memberof HasPanelListBase
+     */
+    public arrayNonRepeatfy(arr:Array<any>) {
+        let map = new Map();
+        let array = new Array();
+        for (let i = 0; i < arr.length; i++) {
+            map .set(arr[i].srfkey, arr[i]); 
+        }
+        map.forEach((value:any, key:string, map:any) => {
+            array.push(value);
+        });
+        return array ;
+    }
+
+    /**
+     * 节流
+     *
+     * @param {Array<any>} [arr]
+     * @returns {void}
+     * @memberof HasPanelListBase
+     */
+    public throttle(fn:any, wait:number){
+        let time = 0;
+        return () =>{
+          let now = Date.now()
+          let args = arguments;
+          if(now - time > wait){
+            fn.apply(this, args)
+            time = now;
+          }
+        }
+    }
+
+    /**
+     * 删除
+     *
+     * @param {any[]} datas
+     * @returns {Promise<any>}
+     * @memberof HasPanelListBase
+     */
+    public async remove(datas: any[]): Promise<any> {
+        if(!this.removeAction){
+            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKHasPanelListView' + (this.$t('app.list.notConfig.removeAction') as string) });
+            return;
+        }
+        if (datas.length === 0) {
+            return;
+        }
+        let dataInfo = '';
+        datas.forEach((record: any, index: number) => {
+            let srfmajortext = record.srfmajortext;
+            if (index < 5) {
+                if (!Object.is(dataInfo, '')) {
+                    dataInfo += '、';
+                }
+                dataInfo += srfmajortext;
+            } else {
+                return false;
+            }
+        });
+
+        if (datas.length < 5) {
+            dataInfo = dataInfo + ' 共' + datas.length + '条数据';
+        } else {
+            dataInfo = dataInfo + '...' + ' 共' + datas.length + '条数据';
+        }
+
+        const removeData = () => {
+            let keys: any[] = [];
+            datas.forEach((data: any) => {
+                keys.push(data.srfkey); 
+            });
+            let _removeAction = keys.length > 1 ? 'removeBatch' : this.removeAction ;
+            const context:any = JSON.parse(JSON.stringify(this.context));
+            const post: Promise<any> = this.service.delete(_removeAction,Object.assign(context,{ ibizbook: keys.join(';') }),Object.assign({ ibizbook: keys.join(';') },{viewparams:this.viewparams}), this.showBusyIndicator);
+            return new Promise((resolve: any, reject: any) => {
+                post.then((response: any) => {
+                    if (!response || response.status !== 200) {
+                        this.$Notice.error({ title: '', desc: (this.$t('app.commonWords.delDataFail') as string) + ',' + response.info });
+                        return;
+                    } else {
+                        this.$Notice.success({ title: '', desc: (this.$t('app.commonWords.deleteSuccess') as string) });
+                    }
+                    //删除items中已删除的项
+                    datas.forEach((data: any) => {
+                        this.items.some((item:any,index:number)=>{
+                            if(Object.is(item.srfkey,data.srfkey)){
+                                this.items.splice(index,1);
+                                return true;
+                            }
+                        });
+                    });
+                    this.$emit('remove', null);
+                    this.selections = [];
+                    resolve(response);
+                }).catch((response: any) => {
+                    if (response && response.status === 401) {
+                        return;
+                    }
+                    if (!response || !response.status || !response.data) {
+                        this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: (this.$t('app.commonWords.sysException') as string) });
+                        reject(response);
+                        return;
+                    }
+                    reject(response);
+                });
+            });
+        }
+
+        dataInfo = dataInfo.replace(/[null]/g, '').replace(/[undefined]/g, '').replace(/[ ]/g, '');
+        this.$Modal.confirm({
+            title: (this.$t('app.commonWords.warning') as string),
+            content: (this.$t('app.list.confirmDel') as string) + ' ' + dataInfo + '，' + (this.$t('app.list.notRecoverable') as string) ,
+            onOk: () => {
+                removeData();
+            },
+            onCancel: () => { }
+        });
+        return removeData;
+    }
+
+    /**
+     * 保存
+     *
+     * @param {*} $event
+     * @returns {Promise<any>}
+     * @memberof HasPanelListBase
+     */
+    public async save(args: any[], params?: any, $event?: any, xData?: any){
+        let _this = this;
+        let successItems:any = [];
+        let errorItems:any = [];
+        let errorMessage:any = [];
+        for (const item of _this.items) {
+            try {
+                if(Object.is(item.rowDataState, 'create')){
+                    if(!this.createAction){
+                        this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKHasPanelListView' + (this.$t('app.list.notConfig.createAction') as string) });
+                    }else{
+                      Object.assign(item,{viewparams:this.viewparams});
+                      let response = await this.service.add(this.createAction, JSON.parse(JSON.stringify(this.context)),item, this.showBusyIndicator);
+                      successItems.push(JSON.parse(JSON.stringify(response.data)));
+                    }
+                }else if(Object.is(item.rowDataState, 'update')){
+                    if(!this.updateAction){
+                        this.$Notice.error({ title: (this.$t('app.commonWords.warning') as string), desc: 'IBIZBOOKHasPanelListView' + (this.$t('app.list.notConfig.updateAction') as string) });
+                    }else{
+                        Object.assign(item,{viewparams:this.viewparams});
+                        if(item.ibizbook){
+                            Object.assign(this.context,{ibizbook:item.ibizbook});
+                        }
+                        let response = await this.service.add(this.updateAction,JSON.parse(JSON.stringify(this.context)),item, this.showBusyIndicator);
+                        successItems.push(JSON.parse(JSON.stringify(response.data)));
+                    }
+                }
+            } catch (error) {
+                errorItems.push(JSON.parse(JSON.stringify(item)));
+                errorMessage.push(error);
+            }
+        }
+        this.$emit('save', successItems);
+        this.refresh();
+        if(errorItems.length === 0){
+            this.$Notice.success({ title: '', desc: (this.$t('app.commonWords.saveSuccess') as string) });
+        }else{
+          errorItems.forEach((item:any,index:number)=>{
+            this.$Notice.error({ title: (this.$t('app.commonWords.saveFailed') as string), desc: item.majorentityname+ (this.$t('app.commonWords.saveFailed') as string) + '!' });
+            console.error(errorMessage[index]);
+          });
+        }
+        return successItems;
+    }
+
+    /**
+     * 面板数据变化处理事件
+     * @param {any} item 当前列数据
+     * @param {any} $event 面板事件数据
+     *
+     * @memberof HasPanelListBase
+     */
+    public onPanelDataChange(item:any,$event:any) {
+        Object.assign(item, $event, {rowDataState:'update'});
+    }
+
+    /**
+     * 选择数据
+     * @memberof HasPanelListBase
+     *
+     */
+    public handleClick(args: any) {
+        this.clearSelection();
+        args.isselected = !args.isselected;
+        this.selectchange();
+    }
+
+    /**
+     * 双击数据
+     * @memberof HasPanelListBase
+     *
+     */
+    public handleDblClick(args: any) {
+        this.$emit('rowdblclick', args);
+    }
+
+    /**
+     * 触发事件
+     * @memberof HasPanelListBase
+     *
+     */
+    public selectchange() {
+        this.selections = [];
+        this.items.map((item: any) => {
+            if (item.isselected) {
+                this.selections.push(item);
+            }
+        });
+        this.$emit('selectionchange', this.selections);
+    }
+
+    /**
+     * 清除当前所有选中状态
+     *
+     * @memberof HasPanelListBase
+     */
+    public clearSelection(){
+        this.items.map((item: any) => {
+            Object.assign(item, { isselected: false });
+        }); 
+    }
+
+    /**
+     * 操作栏模型数据
+     *
+     * @type {*}
+     * @memberof HasPanelListBase
+     */ 
+    public ActionModel:any ={
+    };
+
+    /**
+     * 操作列界面行为
+     *
+     * @param {*} data
+     * @param {*} tag
+     * @param {*} $event
+     * @memberof HasPanelListBase
+     */
+	public uiAction(data: any, tag: any, $event: any) {
+        $event.stopPropagation();
+    }
+
+}
+</script>
+
+<style lang='less'>
+@import './has-panel-list-list.less';
+</style>
\ No newline at end of file

app_Web/src/widgets/ibizbook/has-panel-list-list/has-panel-list-list-model.ts

+/**
+ * HasPanelList 部件模型
+ *
+ * @export
+ * @class HasPanelListModel
+ */
+export default class HasPanelListModel {
+
+	/**
+	 * 获取数据项集合
+	 *
+	 * @returns {any[]}
+	 * @memberof HasPanelListListMode
+	 */
+	public getDataItems(): any[] {
+		return [
+			{
+				name: 'ibizbookname',
+			},
+			{
+				name: 'type',
+			},
+			{
+				name: 'booknumber',
+			},
+			{
+				name: 'ibizbookid',
+			},
+			{
+				name: 'price',
+			},
+			{
+				name: 'press',
+			},
+			{
+				name: 'author',
+			},
+			{
+				name: 'srfkey',
+				prop: 'ibizbookid',
+				dataType: 'GUID',
+			},
+			{
+				name: 'srfmajortext',
+				prop: 'ibizbookname',
+				dataType: 'TEXT',
+			},
+			{
+				name: 'ibizbook',
+				prop: 'ibizbookid',
+				dataType: 'FONTKEY',
+			},
+
+      {
+        name:'size',
+        prop:'size'
+      },
+      {
+        name:'query',
+        prop:'query'
+      },
+      {
+        name:'sort',
+        prop:'sort'
+      },
+      {
+        name:'page',
+        prop:'page'
+      },
+      // 前端新增修改标识，新增为"0",修改为"1"或未设值
+      {
+        name: 'srffrontuf',
+        prop: 'srffrontuf',
+        dataType: 'TEXT',
+      },
+		]
+	}
+
+}
\ No newline at end of file

app_Web/src/widgets/ibizbook/has-panel-list-list/has-panel-list-list-service.ts

+import { Http,Util,Errorlog } from '@/utils';
+import ControlService from '@/widgets/control-service';
+import IBIZBOOKService from '@/service/ibizbook/ibizbook-service';
+import HasPanelListModel from './has-panel-list-list-model';
+
+
+/**
+ * HasPanelList 部件服务对象
+ *
+ * @export
+ * @class HasPanelListService
+ */
+export default class HasPanelListService extends ControlService {
+
+    /**
+     * 图书服务对象
+     *
+     * @type {IBIZBOOKService}
+     * @memberof HasPanelListService
+     */
+    public appEntityService: IBIZBOOKService = new IBIZBOOKService({ $store: this.getStore() });
+
+    /**
+     * 设置从数据模式
+     *
+     * @type {boolean}
+     * @memberof HasPanelListService
+     */
+    public setTempMode(){
+        this.isTempMode = false;
+    }
+
+    /**
+     * Creates an instance of HasPanelListService.
+     * 
+     * @param {*} [opts={}]
+     * @memberof HasPanelListService
+     */
+    constructor(opts: any = {}) {
+        super(opts);
+        this.model = new HasPanelListModel();
+    }
+
+    /**
+     * 查询数据
+     *
+     * @param {string} action
+     * @param {*} [context={}]
+     * @param {*} [data={}]
+     * @param {boolean} [isloading]
+     * @returns {Promise<any>}
+     * @memberof HasPanelListService
+     */
+    @Errorlog
+    public search(action: string, context: any = {},data: any = {}, isloading?: boolean): Promise<any> {
+        const {data:Data,context:Context} = this.handleRequestData(action,context,data,true);
+        return new Promise((resolve: any, reject: any) => {
+            const _appEntityService: any = this.appEntityService;
+            let result: Promise<any>;
+            if (_appEntityService[action] && _appEntityService[action] instanceof Function) {
+                result = _appEntityService[action](Context,Data, isloading);
+            }else{
+                result =_appEntityService.FetchDefault(Context,Data, isloading);
+            }
+            result.then(async (response) => {
+                await this.handleResponse(action, response);
+                resolve(response);
+            }).catch(response => {
+                reject(response);
+            });      
+        });
+    }
+
+    /**
+     * 删除数据
+     *
+     * @param {string} action
+     * @param {*} [context={}]
+     * @param {*} [data={}]
+     * @param {boolean} [isloading]
+     * @returns {Promise<any>}
+     * @memberof HasPanelListService
+     */
+    @Errorlog
+    public delete(action: string, context: any = {},data: any = {}, isloading?: boolean): Promise<any> {
+        const {data:Data,context:Context} = this.handleRequestData(action,context,data,true);
+        return new Promise((resolve: any, reject: any) => {
+            const _appEntityService: any = this.appEntityService;
+            let result: Promise<any>;
+            if (_appEntityService[action] && _appEntityService[action] instanceof Function) {
+                result = _appEntityService[action](Context,Data, isloading);
+            }else{
+                result =_appEntityService.remove(Context,Data , isloading);
+            }
+            result.then((response) => {
+                this.handleResponse(action, response);
+                resolve(response);
+            }).catch(response => {
+                reject(response);
+            });      
+        });
+    }
+
+    /**
+     * 添加数据
+     *
+     * @param {string} action
+     * @param {*} [context={}]
+     * @param {*} [data={}]
+     * @param {boolean} [isloading]
+     * @returns {Promise<any>}
+     * @memberof HasPanelListService
+     */
+    @Errorlog
+    public add(action: string, context: any = {},data: any = {}, isloading?: boolean): Promise<any> {
+        const {data:Data,context:Context} = this.handleRequestData(action,context,data,true);
+        return new Promise((resolve: any, reject: any) => {
+            const _appEntityService: any = this.appEntityService;
+            let result: Promise<any>;
+            if (_appEntityService[action] && _appEntityService[action] instanceof Function) {
+                result = _appEntityService[action](Context,Data, isloading);
+            }else{
+                result =_appEntityService.Create(Context,Data, isloading);
+            }
+            result.then((response) => {
+                this.handleResponse(action, response);
+                resolve(response);
+            }).catch(response => {
+                reject(response);
+            });      
+        });
+    }
+
+    /**
+     * 修改数据
+     *
+     * @param {string} action
+     * @param {*} [context={}]
+     * @param {*} [data={}]
+     * @param {boolean} [isloading]
+     * @returns {Promise<any>}
+     * @memberof HasPanelListService
+     */
+    @Errorlog
+    public update(action: string, context: any = {},data: any = {}, isloading?: boolean): Promise<any> {
+        const {data:Data,context:Context} = this.handleRequestData(action,context,data,true);
+        return new Promise((resolve: any, reject: any) => {
+            const _appEntityService: any = this.appEntityService;
+            let result: Promise<any>;
+            if (_appEntityService[action] && _appEntityService[action] instanceof Function) {
+                result = _appEntityService[action](Context,Data,isloading);
+            }else{
+                result =_appEntityService.Update(Context,Data,isloading);
+            }
+            result.then((response) => {
+                this.handleResponse(action, response);
+                resolve(response);
+            }).catch(response => {
+                reject(response);
+            });      
+        });
+    }
+}
\ No newline at end of file

app_Web/src/widgets/ibizbook/has-panel-list-list/has-panel-list-list.less

+// this is less
+
+.app-list {
+    height:100%;
+    flex-grow: 1;
+    overflow-y: auto;
+    .el-collapse-item__header.is-active{
+        color: #409eff;
+        background-color: #ecf5ff;
+    }
+    .app-list-item {
+        line-height: 34px;
+        border-radius:5px;
+        padding: 6px;
+        margin: 6px;
+        box-shadow: 0px 0px 2px 1px rgb(209, 208, 208);
+        background: #f7f7fa;
+        min-height: 24px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .app-list-item.isSelect {
+        background: #ecf5ff;
+        border-left: 5px solid #2d8cf0;
+        box-shadow: 0px 0px 3px 1px #82bff7;
+    }
+    .app-list-item:hover {
+        background: #ecf5ff;
+    }
+    .loadmore {
+        text-align: center;
+        padding: 10px;
+        text-decoration: underline;
+        color: #82bff7;
+        cursor: default;
+    }
+}
+.app-list-empty {
+    height:100%;
+    color: #909399;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

app_Web/src/widgets/ibizbook/has-panel-list-list/has-panel-list-list.vue

+<script lang='tsx'>
+import { Component } from 'vue-property-decorator';
+import HasPanelListBase from './has-panel-list-list-base.vue';
+
+import layout_list_itempanel from '@widgets/ibizbook/has-panel-list-panel/has-panel-list-panel.vue';
+ 
+@Component({
+    components: {
+        layout_list_itempanel,
+         
+    }
+})
+export default class HasPanelList extends HasPanelListBase {
+
+}
+</script>
\ No newline at end of file

app_Web/src/widgets/ibizbook/has-panel-list-panel/has-panel-list-panel-base.vue

+<template>
+        <row class="app-layoutpanel " style="width:100%;height:100%;">
+        <i-col v-show="detailsModel.container1.visible"  :md="{ span: 24, offset: 0 }"  class="app-layoutpanel-container" style="width:;height:100%;">
+            <row style="height:100%;">
+                      
+                <i-col v-show="detailsModel.bookname.visible"  :md="{ span: 24, offset: 0 }" style="" class="app-layoutpanel-field">
+                    <div class="item-field">
+                    <app-panel-field
+                      name='bookname'
+                      labelPos='LEFT'
+                      caption="图书名称"
+                      :isEmptyCaption="false"
+                      :error='detailsModel.bookname.error'
+                      :data='data'
+                      :value='data.bookname'
+                      :itemRules="rules.bookname">
+                    <input-box 
+                  v-model="data.bookname" 
+                  style=""
+                  type="text"
+                  :disabled="detailsModel.bookname.disabled"
+                  
+                  
+                  @change="($event)=>{panelEditItemChange(data, 'bookname', $event)}">
+                </input-box>
+                
+                    </app-panel-field>
+                </div>
+                
+                
+                </i-col>
+                      
+                <i-col v-show="detailsModel.author.visible"  :md="{ span: 24, offset: 0 }" style="" class="app-layoutpanel-field">
+                    <div class="item-field">
+                    <app-panel-field
+                      name='author'
+                      labelPos='LEFT'
+                      caption="图书作者"
+                      :isEmptyCaption="false"
+                      :error='detailsModel.author.error'
+                      :data='data'
+                      :value='data.author'
+                      :itemRules="rules.author">
+                    <input-box 
+                  v-model="data.author" 
+                  style=""
+                  type="text"
+                  :disabled="detailsModel.author.disabled"
+                  
+                  
+                  @change="($event)=>{panelEditItemChange(data, 'author', $event)}">
+                </input-box>
+                
+                    </app-panel-field>
+                </div>
+                
+                
+                </i-col>
+                      
+                <i-col v-show="detailsModel.press.visible"  :md="{ span: 24, offset: 0 }" style="" class="app-layoutpanel-field">
+                    <div class="item-field">
+                    <app-panel-field
+                      name='press'
+                      labelPos='LEFT'
+                      caption="图书出版社"
+                      :isEmptyCaption="false"
+                      :error='detailsModel.press.error'
+                      :data='data'
+                      :value='data.press'
+                      :itemRules="rules.press">
+                    <input-box 
+                  v-model="data.press" 
+                  style=""
+                  type="text"
+                  :disabled="detailsModel.press.disabled"
+                  
+                  
+                  @change="($event)=>{panelEditItemChange(data, 'press', $event)}">
+                </input-box>
+                
+                    </app-panel-field>
+                </div>
+                
+                
+                </i-col>
+            </row>
+        </i-col>
+    </row>
+
+</template>
+<script lang='tsx'>
+import { Vue, Component, Prop, Provide, Emit, Watch, Model,Inject } from 'vue-property-decorator';
+import { CreateElement } from 'vue';
+import { Subject, Subscription } from 'rxjs';
+import { ControlInterface } from '@/interface/control';
+import { UIActionTool,Util,ViewTool } from '@/utils';
+import NavDataService from '@/service/app/navdata-service';
+import AppCenterService from "@service/app/app-center-service";
+import IBIZBOOKService from '@/service/ibizbook/ibizbook-service';
+import HasPanelListService from './has-panel-list-panel-service';
+import IBIZBOOKUIService from '@/uiservice/ibizbook/ibizbook-ui-service';
+import { PanelDetailModel,PanelRawitemModel,PanelTabPanelModel,PanelTabPageModel,PanelFieldModel,PanelContainerModel,PanelControlModel,PanelUserControlModel,PanelButtonModel } from '@/model/panel-detail';
+import HasPanelListModel from './has-panel-list-panel-model';
+import CodeListService from "@/codelist/codelist-service";
+import UIService from '@/uiservice/ui-service';
+
+
+@Component({
+    components: {
+      
+    }
+})
+export default class HasPanelListBase extends Vue implements ControlInterface {
+
+    /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof HasPanelListBase
+     */
+    @Prop() public name?: string;
+
+    /**
+     * 视图通讯对象
+     *
+     * @type {Subject<ViewState>}
+     * @memberof HasPanelListBase
+     */
+    @Prop() public viewState!: Subject<ViewState>;
+
+    /**
+     * 应用上下文
+     *
+     * @type {*}
+     * @memberof HasPanelListBase
+     */
+    @Prop() public context: any;
+
+    /**
+     * 视图参数
+     *
+     * @type {*}
+     * @memberof HasPanelListBase
+     */
+    @Prop() public viewparams: any;
+
+    /**
+     * 视图状态事件
+     *
+     * @public
+     * @type {(Subscription | undefined)}
+     * @memberof HasPanelListBase
+     */
+    public viewStateEvent: Subscription | undefined;
+
+    /**
+     * 获取部件类型
+     *
+     * @returns {string}
+     * @memberof HasPanelListBase
+     */
+    public getControlType(): string {
+        return 'PANEL'
+    }
+
+
+
+    /**
+     * 计数器服务对象集合
+     *
+     * @type {Array<*>}
+     * @memberof HasPanelListBase
+     */    
+    public counterServiceArray:Array<any> = [];
+
+    /**
+     * 建构部件服务对象
+     *
+     * @type {HasPanelListService}
+     * @memberof HasPanelListBase
+     */
+    public service: HasPanelListService = new HasPanelListService({ $store: this.$store });
+
+    /**
+     * 实体服务对象
+     *
+     * @type {IBIZBOOKService}
+     * @memberof HasPanelListBase
+     */
+    public appEntityService: IBIZBOOKService = new IBIZBOOKService({ $store: this.$store });
+    
+
+
+    /**
+     * 转化数据
+     *
+     * @param {any} args
+     * @memberof  HasPanelListBase
+     */
+    public transformData(args: any) {
+        let _this: any = this;
+        if(_this.service && _this.service.handleRequestData instanceof Function && _this.service.handleRequestData('transform',_this.context,args)){
+            return _this.service.handleRequestData('transform',_this.context,args)['data'];
+        }
+    }
+
+    /**
+     * 关闭视图
+     *
+     * @param {any} args
+     * @memberof HasPanelListBase
+     */
+    public closeView(args: any): void {
+        let _this: any = this;
+        _this.$emit('closeview', [args]);
+    }
+
+    /**
+     *  计数器刷新
+     *
+     * @memberof HasPanelListBase
+     */
+    public counterRefresh(){
+        const _this:any =this;
+        if(_this.counterServiceArray && _this.counterServiceArray.length >0){
+            _this.counterServiceArray.forEach((item:any) =>{
+                if(item.refreshData && item.refreshData instanceof Function){
+                    item.refreshData();
+                }
+            })
+        }
+    }
+
+
+
+    /**
+     * 接口实现
+     *
+     * @returns {any[]}
+     * @memberof HasPanelListBase
+     */
+    getDatas(): any[] {
+        if (!this.panelData) {
+            return [];
+        }
+        return [this.panelData];
+    }
+
+    /**
+     * 接口实现
+     *
+     * @returns {*}
+     * @memberof HasPanelListBase
+     */
+    getData() {
+        return this.panelData;
+    }
+
+    /**
+     * 父级部件引用
+     *
+     * @type {*}
+     * @memberof HasPanelListBase
+     */
+    @Prop() public parentRef?: any;
+
+    /**
+     * 面板数据对象
+     *
+     * @type {*}
+     * @memberof HasPanelListBase
+     */
+    @Prop() public inputData?: any;
+
+    /**
+     * UI数据对象
+     *
+     * @type {*}
+     * @memberof HasPanelListBase
+     */
+    public data:any = {};
+
+    /**
+     * 面板数据对象
+     *
+     * @type {*}
+     * @memberof HasPanelListBase
+     */
+    public panelData:any = null;
+
+    /**
+     * 数据模型对象
+     *
+     * @type {HasPanelListModel}
+     * @memberof HasPanelListBase
+     */
+    public dataModel:HasPanelListModel = new HasPanelListModel();
+
+    /**
+     * 代码表服务对象
+     *
+     * @type {CodeListService}
+     * @memberof HasPanelListBase
+     */
+    public codeListService:CodeListService = new CodeListService({ $store:this.$store });
+
+    /**
+     * 界面UI服务对象
+     *
+     * @type {IBIZBOOKUIService}
+     * @memberof HasPanelListBase
+     */  
+    public appUIService:IBIZBOOKUIService = new IBIZBOOKUIService(this.$store);
+
+    /**
+     * 详情模型集合
+     *
+     * @type {*}
+     * @memberof HasPanelListBase
+     */
+    public detailsModel: any = {
+        bookname: new PanelFieldModel({ caption: '图书名称', itemType: 'FIELD',visible: true, disabled: false, name: 'bookname', panel: this })
+,
+        author: new PanelFieldModel({ caption: '图书作者', itemType: 'FIELD',visible: true, disabled: false, name: 'author', panel: this })
+,
+        press: new PanelFieldModel({ caption: '图书出版社', itemType: 'FIELD',visible: true, disabled: false, name: 'press', panel: this })
+,
+        container1: new PanelContainerModel({ caption: '', itemType: 'CONTAINER',visible: true, disabled: false, name: 'container1', panel: this })
+,
+    };
+
+    /**
+     * 值规则对象
+     *
+     * @type {*}
+     * @memberof HasPanelListBase
+     */
+    public rules:any={
+        bookname:[
+            { required: false, type: 'string', message: '图书名称 值不能为空'},
+            { required: false, type: 'string', message: '图书名称 值不能为空'}
+        ],
+        author:[
+            { required: false, type: 'string', message: '图书作者 值不能为空'},
+            { required: false, type: 'string', message: '图书作者 值不能为空'}
+        ],
+        press:[
+            { required: false, type: 'string', message: '图书出版社 值不能为空'},
+            { required: false, type: 'string', message: '图书出版社 值不能为空'}
+        ],
+    };
+
+    /**
+     * 监听数据对象
+     *
+     * @memberof HasPanelListBase
+     */
+    @Watch('inputData',{immediate:true,deep: true})
+    public onInputDataChange(newVal: any, oldVal: any){
+        if(newVal){
+            this.computedUIData(newVal);
+            this.panelData = Util.deepCopy(newVal);
+            this.computeButtonState(newVal);
+            this.panelLogic({ name: '', newVal: null, oldVal: null });
+            this.$forceUpdate();
+        }
+    }
+
+    /**
+     * 计算UI展示数据
+     * 
+     * @param codelistArray 代码表模型数组
+     * @memberof HasPanelListBase
+     */
+    public computedUIData(newVal:any){
+        if((this.dataModel.getDataItems instanceof Function) && this.dataModel.getDataItems().length >0){
+            this.dataModel.getDataItems().forEach((item:any) =>{
+                this.data[item.name] = newVal[item.prop];
+            })
+        }
+    }
+
+    /**
+     * 计算面板按钮权限状态
+     *
+     * @param {*} [data] 传入数据
+     * @memberof HasPanelListBase
+     */
+    public computeButtonState(data:any){
+        // 若为项布局面板，存在parentRef
+        if(this.parentRef){
+            let targetData:any = this.parentRef.transformData(data);
+            if(this.detailsModel && Object.keys(this.detailsModel).length >0){
+                Object.keys(this.detailsModel).forEach((name:any) =>{
+                    if(this.detailsModel[name] && this.detailsModel[name].uiaction && this.detailsModel[name].uiaction.dataaccaction && Object.is(this.detailsModel[name].itemType,"BUTTON")){
+                        this.detailsModel[name].isPower = true;
+                        let tempUIAction:any = JSON.parse(JSON.stringify(this.detailsModel[name].uiaction));
+                        let result: any[] = ViewTool.calcActionItemAuthState(targetData,[tempUIAction],this.appUIService?this.appUIService:null);
+                        this.detailsModel[name].visible = tempUIAction.visabled;
+                        this.detailsModel[name].disabled = tempUIAction.disabled;
+                        this.detailsModel[name].isPower = result[0] === 1 ? true : false;
+                    }
+                })
+            }
+        }
+    }
+
+    /**
+     * 界面行为
+     *
+     * @param {*} row
+     * @param {*} tag
+     * @param {*} $event
+     * @memberof HasPanelListBase
+     */
+    public uiAction(row: any, tag: any, $event: any) {
+    }
+
+    /**
+     * 打开编辑数据视图
+     *
+     * @type {any}
+     * @memberof HasPanelListBase
+     */
+    public opendata(args: any[],fullargs?:any[],params?: any, $event?: any, xData?: any){
+        if (this.parentRef.opendata && this.parentRef.opendata instanceof Function) {
+            this.parentRef.opendata(args,fullargs,params, $event, xData);
+        }
+    }
+
+    /**
+     * 打开新建数据视图
+     *
+     * @type {any}
+     * @memberof HasPanelListBase
+     */
+    public newdata(args: any[],fullargs?:any[], params?: any, $event?: any, xData?: any) {
+        if (this.parentRef.newdata && this.parentRef.newdata instanceof Function) {
+            this.parentRef.newdata(args,fullargs,params, $event, xData);
+        }
+    }
+    
+    /**
+     * 删除
+     *
+     * @param {any[]} datas
+     * @returns {Promise<any>}
+     * @memberof HasPanelListBase
+     */
+    public async remove(datas: any[]): Promise<any> {
+        if (this.parentRef.remove && this.parentRef.remove instanceof Function) {
+            return this.parentRef.remove(datas);
+        }
+    }
+
+    /**
+     * 刷新
+     *
+     * @param {*} [args={}]
+     * @memberof HasPanelListBase
+     */
+    public refresh(args: any = {}) {
+        if (this.parentRef.refresh && this.parentRef.refresh instanceof Function) {
+            this.parentRef.refresh(args);
+        }
+    }
+
+    /**
+     * 设置变更面板编辑项的值
+     *  
+     * @param data 面板数据
+     * @param {{ name: string, value: any }} $event
+     * @returns {void}
+     * @memberof HasPanelListBase
+     */
+    public onPanelItemValueChange(data: any,$event: { name: string, value: any }): void {
+        if (!$event) {
+            return;
+        }
+        if (!$event.name || Object.is($event.name, '') || !data.hasOwnProperty($event.name)) {
+            return;
+        }
+        data[$event.name] = $event.value;
+        this.panelEditItemChange(data, $event.name, $event.value);
+    }
+
+    /**
+     * 面板编辑项值变化后续操作
+     *
+     * @public
+     * @param data 面板数据
+     * @param property 编辑项名
+     * @param value 编辑项值
+     * @returns {void}
+     * @memberof HasPanelListBase
+     */
+    public panelEditItemChange(data: any, property: string, value: any){
+        // 面板数据变化事件
+        if((this.dataModel.getDataItems instanceof Function) && this.dataModel.getDataItems().length >0){
+            let modelitem =this.dataModel.getDataItems().find((item:any) =>{
+                return item.name === property;
+            }) 
+            if(modelitem){
+                this.$emit('panelDataChange',{[modelitem.prop]: value});
+            }
+        }
+
+    }
+
+    /**
+     * 分页切换事件
+     *
+     * @memberof HasPanelListBase
+     */
+    public handleTabPanelClick(name:string,$event:any){
+        this.detailsModel[name].clickPage($event.name);
+    }
+
+    /**
+     * 面板逻辑
+     *
+     * @public
+     * @param {{ name: string, newVal: any, oldVal: any }} { name, newVal, oldVal }
+     * @memberof HasPanelListBase
+     */
+    public panelLogic({ name, newVal, oldVal }: { name: string, newVal: any, oldVal: any }): void {
+                
+
+
+
+
+    }
+
+}
+</script>
+
+<style lang='less'>
+@import './has-panel-list-panel.less';
+</style>
+

app_Web/src/widgets/ibizbook/has-panel-list-panel/has-panel-list-panel-model.ts

+/**
+ * HasPanelList 部件模型
+ *
+ * @export
+ * @class HasPanelListModel
+ */
+export default class HasPanelListModel {
+
+  /**
+    * 获取数据项集合
+    *
+    * @returns {any[]}
+    * @memberof HasPanelListModel
+    */
+  public getDataItems(): any[] {
+    return [
+      {
+        name: 'bookname',
+        prop: 'ibizbookname'
+      },
+      {
+        name: 'author',
+        prop: 'author'
+      },
+      {
+        name: 'press',
+        prop: 'press'
+      }
+    ]
+  }
+}
\ No newline at end of file

app_Web/src/widgets/ibizbook/has-panel-list-panel/has-panel-list-panel-service.ts

+import { Http } from '@/utils';
+import ControlService from '@/widgets/control-service';
+
+/**
+ * HasPanelList 部件服务对象
+ *
+ * @export
+ * @class HasPanelListService
+ */
+export default class HasPanelListService extends ControlService {
+}
\ No newline at end of file

app_Web/src/widgets/ibizbook/has-panel-list-panel/has-panel-list-panel.less

+// this is less
+.app-layoutpanel {
+    height: 100%;
+    .app-layoutpanel-container {
+        padding: 6px;
+    }
+    .app-layoutpanel-tabpanel{
+        >.el-tabs {
+            >.el-.el-tabs__header{
+                margin: 0 0 10px;
+            }
+            .app-layoutpanel-tabpage{
+                padding: 6px;
+            }
+        }
+    }
+    .app-layoutpanel-button,.app-layoutpanel-conctrl,.app-layoutpanel-ctrlpos,.app-layoutpanel-field,.app-layoutpanel-rowitem,.app-layoutpanel-usercontrol{
+        padding: 6px;
+    }
+    .item-field{
+        padding: 0 4px;
+        display: flex;
+        >.item-field-label{
+            padding: 0 8px;
+        }
+    }
+}
\ No newline at end of file

app_Web/src/widgets/ibizbook/has-panel-list-panel/has-panel-list-panel.vue

+<script lang='tsx'>
+import { Component } from 'vue-property-decorator';
+import HasPanelListBase from './has-panel-list-panel-base.vue';
+
+ 
+@Component({
+    components: {
+         
+    }
+})
+export default class HasPanelList extends HasPanelListBase {
+
+}
+</script>
\ No newline at end of file

app_Web/src/widgets/ibizsample0001/main4-form/main4-form-base.vue

@@ -506,6 +506,13 @@
   @formitemvaluechange="onFormItemValueChange">
 </app-picker>
 
+</app-form-item>
+
+</i-col>
+<i-col v-show="detailsModel.formitem.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+    <app-form-item name='formitem' :itemRules="this.rules().formitem" class='' :caption="$t('entities.ibizsample0001.main4_form.details.formitem')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.formitem.error" :isEmptyCaption="false" labelPos="LEFT">
+    
+
 </app-form-item>
 
 </i-col>
@@ -983,6 +990,7 @@ export default class Main4Base extends Vue implements ControlInterface {
         f27: null,
         f28: null,
         f29: null,
+        formitem: null,
         ibizsample0002id: null,
         f30: null,
         f31: null,
@@ -1192,6 +1200,10 @@ export default class Main4Base extends Vue implements ControlInterface {
             { required: this.detailsModel.f29.required, type: 'string', message: '数据选择（下拉、数据链接） 值不能为空', trigger: 'change' },
             { required: this.detailsModel.f29.required, type: 'string', message: '数据选择（下拉、数据链接） 值不能为空', trigger: 'blur' },
         ],
+        formitem: [
+            { required: this.detailsModel.formitem.required, type: 'string', message: '地址栏（选择） 值不能为空', trigger: 'change' },
+            { required: this.detailsModel.formitem.required, type: 'string', message: '地址栏（选择） 值不能为空', trigger: 'blur' },
+        ],
         f30: [
             { required: this.detailsModel.f30.required, type: 'string', message: '自动填充 值不能为空', trigger: 'change' },
             { required: this.detailsModel.f30.required, type: 'string', message: '自动填充 值不能为空', trigger: 'blur' },
@@ -1408,6 +1420,8 @@ export default class Main4Base extends Vue implements ControlInterface {
         f28: new FormItemModel({ caption: '数据选择（下拉）', detailType: 'FORMITEM', name: 'f28', visible: true, isShowCaption: true, form: this, isControlledContent: false , required:false, disabled: false, enableCond: 3 })
 , 
         f29: new FormItemModel({ caption: '数据选择（下拉、数据链接）', detailType: 'FORMITEM', name: 'f29', visible: true, isShowCaption: true, form: this, isControlledContent: false , required:false, disabled: false, enableCond: 3 })
+, 
+        formitem: new FormItemModel({ caption: '地址栏（选择）', detailType: 'FORMITEM', name: 'formitem', visible: true, isShowCaption: true, form: this, isControlledContent: false , required:false, disabled: false, enableCond: 3 })
 , 
         ibizsample0002id: new FormItemModel({ caption: '值项表单项', detailType: 'FORMITEM', name: 'ibizsample0002id', visible: true, isShowCaption: true, form: this, isControlledContent: false , required:false, disabled: false, enableCond: 3 })
 , 
@@ -1975,6 +1989,18 @@ export default class Main4Base extends Vue implements ControlInterface {
         this.formDataChange({ name: 'f29', newVal: newVal, oldVal: oldVal });
     }
 
+    /**
+     * 监控表单属性 formitem 值
+     *
+     * @param {*} newVal
+     * @param {*} oldVal
+     * @memberof Main4Base
+     */
+    @Watch('data.formitem')
+    onFormitemChange(newVal: any, oldVal: any) {
+        this.formDataChange({ name: 'formitem', newVal: newVal, oldVal: oldVal });
+    }
+
     /**
      * 监控表单属性 ibizsample0002id 值
      *
@@ -2159,6 +2185,7 @@ export default class Main4Base extends Vue implements ControlInterface {
 
 
 
+
 
 
     }

app_Web/src/widgets/ibizsample0001/main4-form/main4-form-model.ts

@@ -215,6 +215,10 @@ export default class Main4Model {
         prop: 'ibizsample0002name',
         dataType: 'PICKUPTEXT',
       },
+      {
+        name: 'formitem',
+        dataType:'FORMITEM',
+      },
       {
         name: 'ibizsample0002id',
         prop: 'ibizsample0001id',