数据视图相关

@CONTROL/移动端数据视图控件/CONTROL-BASE.template.ftl

+<template>
+  <div class = "card-view ">
+    <div v-if="dataViewMode==='DATAVIEWEXPVIEW'" class="nav-card">
+      <ion-card v-for="(item,index) in items" :key="index" @click="switchView(index)">
+        <ion-card-header>
+          <ion-card-title>{{item.srfkey}}</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>{{item.mobentityname}}</ion-card-content>
+      </ion-card>
+    </div>
+    <ion-row v-else>
+      <ion-col size="12" v-show="showCheack">
+        <div class="selectall">
+          <ion-checkbox :checked="selectAllIschecked" v-show="showCheack" @ionChange="checkboxAll"></ion-checkbox>
+          <ion-label class="selectal-label" v-show="showCheack">全选</ion-label>
+        </div>
+      </ion-col>
+      <ion-col :size="size" v-for="(item,index) in items" :key="index" >
+        <ion-checkbox :checked="item.checked" v-show="showCheack" class="ionic-checkbox"  @click.stop="checkboxSelect(item)"></ion-checkbox>
+        <ion-card :class="[size == '12'? 'ios hydrated ibz-card-12':' ios hydrated ibz-card-6']">
+          <div :class="{'line':size == '12'}">
+            <img class="cardimg" :style="{width :size == '6' ?'':'30%'}" src="assets/images/card.jpg" />
+            <div :style="{width :size == '6' ?'':'70%'}">
+              <ion-card-header class="ibz-header">
+                <ion-card-title class="ibz-title">{{item.<#if appde.getMajorPSAppDEField()??>${appde.getMajorPSAppDEField().getCodeName()?lower_case}<#else>srfmajortext</#if>}}</ion-card-title>
+              </ion-card-header>
+              <#if ctrl.getPSDEDataViewItems?? && ctrl.getPSDEDataViewItems()??>
+              <#list ctrl.getPSDEDataViewItems() as cardItem>
+              <ion-card-content class="ibz-content">
+              {{item.<#if cardItem.getName?? && cardItem.getName()??>${cardItem.getName()?lower_case}</#if>}}
+              </ion-card-content>
+              </#list>
+              </#if>
+            </div>
+          </div>
+          <ion-icon v-show="!showCheack" :style="{color :size == '6' ?'#fff':'#333'}"  @click="remove([item])"   class="card-delete" name="close-outline"></ion-icon>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </div>
+</template>
\ No newline at end of file

@CONTROL/移动端数据视图控件/CONTROL-BASE.vue.ftl

+<#ibizinclude>
+./CONTROL-BASE.template.ftl
+</#ibizinclude>
+
+<#ibizinclude>
+../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl
+</#ibizinclude>
+
+    /**
+     * 视图类型
+     *
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    @Prop() protected viewType?: string | 'DEMOBMDVIEW' | 'DEMOBMDVIEW9' | 'DEMOBWFMDVIEW';
+
+    /**
+     * 显示处理提示
+     *
+     * @type {boolean}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    @Prop({ default: true }) protected showBusyIndicator?: boolean;
+
+    /**
+     * 部件行为--update
+     *
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    @Prop() protected updateAction!: string;
+    
+    /**
+     * 部件行为--fetch
+     *
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    @Prop() protected fetchAction!: string;
+    
+    /**
+     * 部件行为--remove
+     *
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    @Prop() protected removeAction!: string;
+    
+    /**
+     * 部件行为--load
+     *
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    @Prop() protected loadAction!: string;
+    
+    /**
+     * 部件行为--loaddraft
+     *
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    @Prop() protected loaddraftAction!: string;
+    
+    /**
+     * 部件行为--create
+     *
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    @Prop() protected createAction!: string;
+
+    /**
+     * 部件样式
+     *
+     * @type {string}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    @Prop({default: '<#if ctrl.getMobListStyle?? && ctrl.getMobListStyle()??>${ctrl.getMobListStyle()}</#if>'}) protected controlStyle!: string | 'ICONVIEW'  | 'LISTVIEW' | 'SWIPERVIEW' | 'LISTVIEW2' | 'LISTVIEW3' | 'LISTVIEW4';
+
+    /**
+    *上级传递的选中项
+    *@type {Array}
+    *@memberof ${srfclassname('${ctrl.codeName}')}
+    */
+     @Prop() public selectedData?:Array<any>;
+
+
+    /**
+    * 新建打开视图
+    *
+    * @type {Function}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    @Prop() public newdata?: Function; 
+
+
+    /**
+    * 打开视图
+    *
+    * @type {Function}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    @Prop() public opendata?: Function; 
+
+
+    /**
+    * 当前选中数组
+    *
+    * @type {array}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    public  selectdata :any = [];
+
+    /**
+    * 关闭行为
+    *
+    * @type {Function}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    @Prop() public close?:Function;
+
+
+    /**
+     * 布局大小
+     * 
+     * @memberof ${srfclassname('${ctrl.name}')}
+     */    
+    @Prop() public size?:string;
+
+
+    /**
+    * 是否为临时模式
+    *
+    * @type {boolean}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    @Prop({ default: false}) public isTempMode?:boolean;
+
+    /**
+    * 视图类型
+    *
+    * @type {string}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    @Prop({ default: 'DATAVIEW'}) public dataViewMode?:string;
+
+    <#if view.getViewType()?? && view.getViewType()=='DEMOBPICKUPMDVIEW'>
+    /**
+    * 存放多数据选择数组（多选）
+    *
+    * @type {array}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    public checkboxList:Array<string> = [];
+
+    /**
+    * 存放数据选择数组(单选)
+    *
+    * @type {object}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    public radio:any = '';
+
+
+    /**
+    * 点击多选按钮触发
+    *
+    *
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    public change(){
+        if(this.isMutli){
+             let checkboxLists= this.items.filter((item,index)=>{
+                  if(this.checkboxList.indexOf(item.srfkey)!=-1){
+                    return true;
+                  }else{
+                    return false;
+                  }
+                })
+          this.$emit('selectchange',checkboxLists);
+        }else{
+           let radioItem = this.items.filter((item,index)=>{return item.srfkey==this.radio});
+           this.$emit('selectchange',radioItem);
+        }
+    }
+    </#if>
+
+    /**
+    * 列表键值对
+    *
+    * @type {Map}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    public listMap: any = new Map();
+
+    /**
+    * 分页大小
+    *
+    * @type {number}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    public pageSize: number = ${ctrl.getPagingSize()?c};
+
+    /**
+    * 总页数
+    *
+    * @type {number}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+     public pageTotal: number = 0;
+
+    /**
+    * 当前页数
+    *
+    * @type {number}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+     public pageNumber: number = 1;
+
+    /**
+    * 判断底部数据是否全部加载完成，若为真，则 bottomMethod 不会被再次触发
+    *
+    * @type {number}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    get allLoaded() {
+        return ((this.pageNumber + 1) * this.pageSize) >= this.pageTotal ? true : false;
+    }
+
+    /**
+    * 底部状态
+    *
+    * @type {String}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    // public bottomStatus: String = "";
+
+    /**
+    * 顶部状态
+    *
+    * @type {String}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    // public topStatus: String = "";
+
+    /**
+    * 
+    *
+    * @type {Number}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    // public moveTranslate: Number = 0;
+
+    /**
+    * searchKey 搜索关键字
+    *
+    * @type {string}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+     public searchKey:string = '';
+
+    /**
+    * 列表数组
+    *
+    * @param {Array<any>}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    public items:Array<any> =[];
+
+    /**
+    * 选中数组
+    *
+    * @param {Array<any>}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    public selectedArray:Array<any> = [];
+
+    /**
+    * 多选计数
+    *
+    * @param {number}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    public selectednumber:number =0;
+
+    /**
+    * 搜索行为
+    *
+    * @param {string}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    @Prop() public searchAction?:string;
+
+    /**
+    * 是否为选择视图
+    *
+    * @param {boolean} 
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    @Prop() public isSelected?:boolean;
+
+    /**
+    * 是否多选
+    *
+    * @type {boolean}
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    @Prop({default:false}) public isMutli?: boolean;
+
+    /**
+    * 单选选择值
+    *
+    * @param {string} 
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    public selectedValue:string = ""; 
+    
+    /**
+    * 底部改变状态
+    * 
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    public handleBottomChange(status: String) {
+    //   this.bottomStatus = status;
+    }
+
+    /**
+    * 顶部改变状态
+    * 
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    public handleTopChange(status: String) {
+    //   this.moveTranslate = 1;
+    //   this.topStatus = status;
+    }
+
+    /**
+    * 卡片切换回调
+    * 
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    public switchView(listIndex: number) {
+        this.items.findIndex((item, index) => {
+            if (index === listIndex) {
+                this.$emit("selectionchange", item);
+            }
+        });
+    }
+
+    /**
+     * 上拉加载更多数据
+     *
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    public async loadBottom(): Promise<any> {
+        this.pageNumber++;
+        let params = {};
+        if (this.viewparams) {
+            Object.assign(params, this.viewparams);
+        }
+        Object.assign(params, { query: this.searchKey, page: this.pageNumber, size: this.pageSize });
+        let response: any = await this.load(params, 'bottom');
+        let loadmoreBottom: any = this.$refs.loadmoreBottom;
+        if (loadmoreBottom) {
+            loadmoreBottom.complete();
+        }
+    }
+
+    /**
+     * 删除
+     *
+     * @param {any[]} datas
+     * @returns {Promise<any>}
+     * @memberof ${srfclassname('${ctrl.name}')}
+     */
+    public async remove(datas: any[]): Promise<any> {
+        let arg: any = {};
+        let keys: Array<string> = [];
+        let infoStr: string = '';
+        datas.forEach((data: any, index: number) => {
+            keys.push(data.${appde.getKeyPSAppDEField().getCodeName()?lower_case});
+            if (index < 5) {
+                if (!Object.is(infoStr, '')) {
+                    infoStr += '、';
+                }
+                <#if appde.getMajorPSAppDEField()??>
+                infoStr += data.${appde.getMajorPSAppDEField().getCodeName()?lower_case};
+                <#else>
+                infoStr += data.srfmajortext;
+                </#if>
+            }
+        });
+
+        if (datas.length < 5) {
+            infoStr = infoStr + this.$t('app.message.totle') + datas.length + this.$t('app.message.data');
+        } else {
+            infoStr = infoStr + '...' + this.$t('app.message.totle') + datas.length + this.$t('app.message.data');
+        }
+        return new Promise((resolve, reject) => {
+            const _remove = async () => {
+                let _context: any = { ${appde.getCodeName()?lower_case}: keys.join(';') }
+                const response: any = await this.service.delete(this.removeAction, Object.assign({}, this.context, _context), arg, this.showBusyIndicator);
+                if (response && response.status === 200) {
+                    this.$notice.success((this.$t('app.message.deleteSccess') as string));
+                    this.load();
+                    resolve(response);
+                } else {
+                    this.$notice.error(response.message);
+                    reject(response);
+                }
+            }
+
+            this.$dialog.confirm({
+                title: (this.$t('app.message.warning') as string),
+                message: this.$t('app.message.confirmToDelete') + infoStr +','+ this.$t('app.message.unrecoverable') + '？',
+            }).then(() => {
+                _remove();
+            }).catch(() => {
+            });
+        });
+    }
+
+    /**
+     * 刷新数据
+     *
+     * @returns {Promise<any>}
+     * @memberof ${srfclassname('${ctrl.name}')}
+     */
+    public refresh(): Promise<any> {
+        return new Promise((resolve: any, reject: any) => {
+            this.load().then((res) => {
+                resolve(res);
+            }).catch((error: any) => {
+                reject(error);
+            })
+        })
+    }
+
+    /**
+     * 快速搜索
+     *
+     * @param {string} query
+     * @returns {Promise<any>}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    public async quickSearch(query: string): Promise<any> {
+        this.searchKey = query;
+        this.pageNumber = 0;
+        const response = await this.load(Object.assign({ query: query }, { page: this.pageNumber, size: this.pageSize }), "init");
+        return response;
+    }
+
+    /**
+     * 数据加载
+     *
+     * @private
+     * @param {*} [data={}]
+     * @param {string} [type=""]
+     * @returns {Promise<any>}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    private async load(data: any = {}, type: string = ""): Promise<any> {
+        if (!data.page) {
+            Object.assign(data, { page: this.pageNumber });
+        }
+        if (!data.size) {
+            Object.assign(data, { size: this.pageSize });
+        }
+        const parentdata: any = {};
+        this.$emit('beforeload', parentdata);
+        Object.assign(data, parentdata);
+        const response: any = await this.service.search(this.fetchAction, this.context, data, this.showBusyIndicator);
+        if (!response || response.status !== 200) {
+            this.$notify({ type: 'danger', message: response.error.message });
+            return response;
+        }
+        this.items = [];
+        this.items = response.data.records;
+        this.$emit('load',this.items);
+        return response;
+    }
+
+    /**
+    * 全选
+    *
+    * @private
+    * @param {*} [arg={}]
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    private handleClick() {
+        this.items.forEach((item: any) => {
+            item.value = true;
+        });
+        this.selectednumber = this.items.length;
+    }
+
+    /**
+     * checkbox 选中回调
+     *
+     * @param {*} data
+     * @returns
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    public checkboxChange(data: any) {
+        let { detail } = data;
+        if (!detail) {
+            return;
+        }
+        let { value } = detail;
+        this.selectednumber = 0;
+        this.items.forEach((item: any, index: number) => {
+            if (item.value) {
+                this.selectednumber++;
+            }
+            if (Object.is(item.${appde.getCodeName()?lower_case}id, value)) {
+                if (detail.checked) {
+                    this.selectdata.push(this.items[index]);
+                } else {
+                    this.selectdata.splice(this.selectdata.findIndex((i: any) => i.value === item.value), 1)
+                }
+            }
+        });
+        this.$emit('selectionchange', this.selectdata);
+    }
+
+    /**
+     * 下拉刷新
+     *
+     * @returns {Promise<any>}
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    public async pullDownToRefresh(): Promise<any> {
+        this.pageNumber = 0;
+        let params = {};
+        if (this.viewparams) {
+            Object.assign(params, this.viewparams);
+        }
+        Object.assign(params, { query: this.searchKey, pageNumber: this.pageNumber, pageSize: this.pageSize });
+        let response: any = await this.load(params, 'top');
+        return response;
+    }
+
+    /**
+    * 点击列表数据跳转
+    *
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    public goPage(item: String) {
+      this.selectedArray.push(item);
+      this.$emit('rowclick',item);
+    }
+
+    /**
+    * 获取多项数据
+    *
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    public getDatas(): any[] {
+      return this.selectedArray;
+    }
+
+    /**
+    * 获取单项数据
+    *
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    public getData(): any {
+        return this.selectedArray[0];
+    }
+
+    /**
+    * vue生命周期created
+    *
+    * @memberof ${srfclassname('${ctrl.codeName}')}
+    */
+    public created() {
+        this.afterCreated();
+    }
+
+    /**
+     * 执行created后的逻辑
+     *
+     *  @memberof ${srfclassname('${ctrl.codeName}')}
+     */    
+    protected 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.pageNumber = 0;
+                    this.load(Object.assign(data, { page: this.pageNumber, size: this.pageSize }), "init");
+                }
+                if (Object.is(action, "search")) {
+                    this.pageNumber = 0;
+                    this.load(Object.assign(data, { page: this.pageNumber, size: this.pageSize }), "init");
+                }
+                if (Object.is(action, "quicksearch")) {
+                    this.searchKey = data;
+                    this.pageNumber = 0;
+                    this.load(Object.assign({ query: data }, { page: this.pageNumber, size: this.pageSize }), "init");
+                }
+                if (Object.is(action, "refresh")) {
+                    this.refresh();
+                }
+            });
+        }
+        <#if view.getViewType()?? && view.getViewType()=='DEMOBPICKUPMDVIEW'>
+        if (!this.isMutli) {
+            if (this.selectedData && this.selectedData.length > 0) {
+                this.radio = this.selectedData[0].srfkey;
+            }
+        } else {
+            if (this.selectedData && this.selectedData.length > 0) {
+                this.checkboxList = [];
+                this.selectedData.forEach((item: any) => {
+                    this.checkboxList.push(item.srfkey);
+                })
+            }
+        }
+        </#if>
+    }
+
+    /**
+     * vue 生命周期
+     *
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    public destroyed() {
+        this.afterDestroy();
+    }
+
+    /**
+     * 执行destroyed后的逻辑
+     *
+     * @memberof ${srfclassname('${ctrl.codeName}')}
+     */
+    protected afterDestroy() {
+        if (this.viewStateEvent) {
+            this.viewStateEvent.unsubscribe();
+        }
+        <#if destroyed_block??>
+        ${destroyed_block}
+        </#if>
+    }
+
+
+
+    /**
+     * 单选选中变化
+     * 
+     * @memberof ${srfclassname('${ctrl.name}')}
+     */
+    public onSimpleSelChange(item: any = {}) {
+        this.$emit('selectionchange', [item]);
+        this.selectedValue = item.srfkey;
+        this.selectedArray = [];
+        this.goPage(item);
+    }
+
+
+   /**
+     * 是否展示多选
+     *
+     * @memberof ${srfclassname('${ctrl.name}')}
+     */
+    @Prop({default:false}) showCheack?: boolean;
+
+
+    /**
+     * 选中或取消事件
+     *
+     * @memberof ${srfclassname('${ctrl.name}')}
+     */
+    public checkboxSelect(item:any){
+        let count = this.selectedArray.findIndex((i) => {
+            return i.${appde.getKeyPSAppDEField().getCodeName()?lower_case} == item.${appde.getKeyPSAppDEField().getCodeName()?lower_case};
+        });
+        let re = false;
+        if(count == -1){
+            re = true;
+            this.selectedArray.push(item);
+        }else{
+            this.selectedArray.splice(count,1);
+        }
+        this.items.forEach((_item: any, index: number) => {
+            if (_item.${appde.getKeyPSAppDEField().getCodeName()?lower_case} == item.${appde.getKeyPSAppDEField().getCodeName()?lower_case}) {
+                this.items[index].checked = re;
+            }
+        });
+    }
+
+    /**
+     * 长按定时器
+     *
+     * @memberof ${srfclassname('${ctrl.name}')}
+     */
+    public loop :any;
+    
+    /**
+     * 开始长按
+     *
+     * @memberof ${srfclassname('${ctrl.name}')}
+     */
+    public start () {
+      clearTimeout(this.loop); //再次清空定时器，防止重复注册定时器
+      this.loop = setTimeout(() => {
+        this.$emit("showCheackChange", !this.showCheack);
+      }, 1000);
+    }
+
+    /**
+     * 结束长按
+     *
+     * @memberof ${srfclassname('${ctrl.name}')}
+     */
+    public end () {
+      clearTimeout(this.loop); //清空定时器，防止重复注册定时器
+    }
+
+   /**
+     * 全选事件
+     *
+     * @memberof ${srfclassname('${ctrl.name}')}
+     */
+    public checkboxAll(item:any) {
+        this.selectAllIschecked = item.detail.checked;
+        if(this.selectAllIschecked){
+            this.selectedArray = JSON.parse(JSON.stringify(this.items));
+        }else{
+            this.selectedArray = [];
+        }
+        this.items.forEach((item:any,index:number)=>{
+            this.items[index].checked = this.selectAllIschecked
+        });
+        this.$forceUpdate();
+    }
+
+
+    /**
+     * 全选按钮选中状态
+     *
+     * @memberof ${srfclassname('${ctrl.name}')}
+     */
+    public selectAllIschecked = false;
+
+<#ibizinclude>
+../@MACRO/CONTROL/CONTROL_BOTTOM-BASE.vue.ftl
+</#ibizinclude>
+
+<#ibizinclude>
+../@MACRO/CONTROL/CONTROL-BASE.style.ftl
+</#ibizinclude>
\ No newline at end of file

@CONTROL/移动端数据视图控件/CONTROL.html.ftl

+<#--  content  -->
+<#assign content>
+    updateAction="<#if ctrl.getUpdatePSControlAction?? && ctrl.getUpdatePSControlAction()?? && ctrl.getUpdatePSControlAction().getPSAppDEMethod()??>${ctrl.getUpdatePSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
+    removeAction="<#if ctrl.getRemovePSControlAction?? && ctrl.getRemovePSControlAction()?? && ctrl.getRemovePSControlAction().getPSAppDEMethod()??>${ctrl.getRemovePSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
+    loaddraftAction="<#if ctrl.getGetDraftPSControlAction?? && ctrl.getGetDraftPSControlAction()?? && ctrl.getGetDraftPSControlAction().getPSAppDEMethod()??>${ctrl.getGetDraftPSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
+    loadAction="<#if ctrl.getGetPSControlAction?? && ctrl.getGetPSControlAction()?? && ctrl.getGetPSControlAction().getPSAppDEMethod()??>${ctrl.getGetPSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
+    createAction="<#if ctrl.getCreatePSControlAction?? && ctrl.getCreatePSControlAction()?? && ctrl.getCreatePSControlAction().getPSAppDEMethod()??>${ctrl.getCreatePSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
+    fetchAction="<#if ctrl.getFetchPSControlAction?? && ctrl.getFetchPSControlAction()?? && ctrl.getFetchPSControlAction().getPSAppDEMethod()??>${ctrl.getFetchPSControlAction().getPSAppDEMethod().getCodeName()}</#if>" 
+    <#if view.getViewType?? && view.getViewType()??>
+    dataViewMode="<#if view.getViewType()=='DEMOBDATAVIEWEXPVIEW'>DATAVIEWEXPVIEW<#else>DATAVIEW</#if>"
+    </#if>
+    <#if view.getViewType?? && view.getViewType()?? && view.getViewType() != 'DEMOBDATAVIEWEXPVIEW'>
+    :size="size"
+    :showCheack="showCheack"
+    @showCheackChange="showCheackChange"
+    </#if>
+</#assign>
+<#ibizinclude>
+../@MACRO/HTML/DEFAULT.html.ftl
+</#ibizinclude>
\ No newline at end of file

@CONTROL/移动端数据视图控件/CONTROL.less.ftl

+<#ibizinclude>
+../@MACRO/CSS/DEFAULT.less.ftl
+</#ibizinclude>
+.ibz-ionic-item{
+    --inner-border-width:0;
+}
+.nav-card{
+    height: 40vh;
+    overflow: hidden;
+    overflow-y: scroll;
+}
+.card-view{
+    .ibz-card {
+        margin-bottom: 0;
+    }
+    .ibz-header {
+        padding: 10px;
+    }
+    .card-delete{
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        font-size: 20px;
+    }
+    .ibz-title {
+        font-size: 15px;
+    }
+    .ibz-card-12 {
+        margin: 12px 12px 0 35px;
+    }
+    .ibz-card-6{
+        margin: 5px 10px 5px 30px;
+    }
+    .ibz-content {
+        padding: 10px;
+        padding-top: 0;
+        font-size: 12px;
+    }
+    .line {
+        display: flex;
+        justify-content: space-between;
+    }
+    .cardimg{
+        height: auto;
+    }
+    .ionic-checkbox {
+        position: absolute;
+        top: calc(50% - 13px);
+    }
+    .selectall{
+        padding: 0;
+        display: flex;
+    }
+    .selectal-label{
+        padding-left: 15px;
+    }
+}
\ No newline at end of file

@CONTROL/移动端数据视图控件/CONTROL.vue.ftl

+<#ibizinclude>
+../@MACRO/CONTROL/CONTROL.vue.ftl
+</#ibizinclude>
\ No newline at end of file

@CONTROL/移动端数据视图控件/MODEL.ts.ftl

+<#ibizinclude>
+../@MACRO/MODEL/DEFAULT.ts.ftl
+</#ibizinclude>
\ No newline at end of file

@CONTROL/移动端数据视图控件/README.md

+
+
+## ibiz数据视图部件相关文档（移动端）
+
+### 一、卡片视图
+
+##### 	(1)支持功能：样式切换、排序、删除、长按多选、长按显示批操工具栏
+
+##### 	(2)界面UI
+
+<div style = "display:flex; overflow:hidden;">
+       <div>
+        <img src="images/README/card_list.png" ></img>
+    	<img src="images/README/card_box.png" ></img>
+    </div>
+    <div>
+        <img src="images/README/each.png" ></img>
+    	<img src="images/README/each_box.png" ></img>
+    </div>
+</div>
+

@CONTROL/移动端数据视图控件/SERVICE.ts.ftl

+<#assign extendsClass>MdServiceBase</#assign>
+<#ibizinclude>
+../@MACRO/SERVICE/SERVICE_HEADER.ts.ftl
+</#ibizinclude>
+<#ibizinclude>
+../@MACRO/SERVICE/SERVICE_BOTTOM.ts.ftl
+</#ibizinclude>
\ No newline at end of file

@CONTROL/移动端数据视图控件/template.properties

+CTRLTYPE=DATAVIEW
\ No newline at end of file

@CONTROL/视图布局面板/实体移动端卡片视图/VIEW.less.ftl

+<#ibizinclude>
+../@MACRO/DEFAULT.less.ftl
+</#ibizinclude>
+.view-tool {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 15px;
+}
+.batch_btn{
+  display: flex;
+  justify-content: center;
+}
\ No newline at end of file

@CONTROL/视图布局面板/实体移动端卡片视图/VIEW.vue.ftl

+<#if view.hasPSControl('dataview')>
+<#assign dataview = view.getPSControl('dataview')>
+<#if !dataview.isNoSort()>
+    <#assign state = false />
+    <#list dataview.getPSDEDataViewItems() as item>
+        <#if item.isEnableSort()>
+        <#assign state = true/>
+        <#break>
+        </#if>
+    </#list>
+    <#if state>
+<#assign view_header_botton>
+        <ion-toolbar class="${srffilepath2(view.getCodeName())}-toolbar default-sort">
+                <div class="view-tool">
+                    <div class="view-tool-sorts">
+                        <div class="view-tool-sorts">
+                        <#list dataview.getPSDEDataViewItems() as item>
+                            <#if item.isEnableSort()>
+                            <div class="view-tool-sorts-item">
+                                <span class="text" @click="setSort('<#if item.getName()??>${item.getName()}</#if>')"><#if item.getCaption()??>${item.getCaption()}</#if></span>
+                                <span class="sort-icon" @click="setSort('<#if item.getName()??>${item.getName()}</#if>')">
+                                    <ion-icon :class="{'ios' : true ,'hydrated': true ,'sort-select': sort.asc == '<#if item.getName()??>${item.getName()}</#if>'}" name="chevron-up-outline" ></ion-icon>
+                                    <ion-icon :class="{'ios' : true ,'hydrated': true ,'sort-select': sort.desc == '<#if item.getName()??>${item.getName()}</#if>'}" name="chevron-down-outline" ></ion-icon>
+                                </span>
+                            </div>
+                            </#if>
+                        </#list>
+                        </div>
+                        <div class="view-tool-searchform">
+                            <!-- <span>过滤<ion-icon name="filter-outline"></ion-icon></span>  -->
+                        </div>
+                    </div>
+                    <div class="view-tool-searchform">
+                            <ion-icon @click="changeSize"  :name="iconname"></ion-icon>
+                    </div>
+                </div>
+            </ion-toolbar>
+</#assign>
+    </#if>
+</#if>
+<#assign view_content>
+${P.getCtrlCode('dataview', 'CONTROL.html').code}
+</#assign>
+<#assign view_footer>
+    <#if dataview.getBatchPSDEToolbar?? && dataview.getBatchPSDEToolbar()??>
+        <#assign batchToolbar = dataview.getBatchPSDEToolbar()>
+    <div v-show="showCheack" class="batch_btn">
+            <@ibizindent blank=8>
+            ${P.getCtrlCode(batchToolbar, 'CONTROL.html').code}
+            </@ibizindent>
+        <ion-button class="app-view-toolbar-button"  @click="cancelSelect" >
+            <ion-icon name="arrow-undo-outline"></ion-icon>
+            {{$t('app.button.cancel')}}
+        </ion-button>
+    </div>     
+    </#if>
+</#assign>
+</#if>
+<#ibizinclude>
+../@MACRO/VIEW_LAYOUT_BASE.ftl
+</#ibizinclude>
\ No newline at end of file

@CONTROL/视图布局面板/实体移动端卡片视图/template.properties

+CTRLTYPE=VIEWLAYOUTPANEL#APPDEMOBDATAVIEW
\ No newline at end of file

@CONTROL/视图布局面板/实体移动端卡片视图导航视图/VIEW.less.ftl

+<#ibizinclude>
+../@MACRO/DEFAULT.less.ftl
+</#ibizinclude>
\ No newline at end of file

@CONTROL/视图布局面板/实体移动端卡片视图导航视图/VIEW.vue.ftl

+<#if view.hasPSControl('dataviewexpbar')>
+<#assign view_content>
+${P.getCtrlCode('dataviewexpbar', 'CONTROL.html').code}
+</#assign>
+</#if>
+<#ibizinclude>
+../@MACRO/VIEW_LAYOUT_BASE.ftl
+</#ibizinclude>
\ No newline at end of file

@CONTROL/视图布局面板/实体移动端卡片视图导航视图/template.properties

+CTRLTYPE=VIEWLAYOUTPANEL#APPDEMOBDATAVIEWEXPVIEW
\ No newline at end of file