CONTROL-BASE.vue.ftl 10.8 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
<template>
<#if ctrl.render??>
    ${ctrl.render.code}
<#else>
    <split id="${ctrl.getCodeName()?lower_case}" class="app-grid-exp-bar <#if ctrl.getPSSysCss()??><#assign singleCss = ctrl.getPSSysCss()> ${singleCss.getCssName()}</#if>" v-model="split" mode="<#if view.getSideBarLayout()?? && view.getSideBarLayout() == "LEFT">horizontal<#else>vertical</#if>" @on-move-end="onSplitChange">
        <div slot='<#if view.getSideBarLayout()?? && view.getSideBarLayout() == "LEFT">left<#else>top</#if>'>
        <#if ctrl.isShowTitleBar()>
            <div class='grid-exp-bar-header'>
                <div><icon type='ios-home-outline'/><#if ctrl.getTitle() == ''>表格导航栏<#else>${ctrl.getTitle()}</#if></div>
            </div>
        </#if>
           <div class="container-header">
                <#if ctrl.isEnableSearch()>
                <div class='search-container'>
                    <i-input :search="true"
                        @on-change="($event) => { this.searchText = $event.target.value; }"
                        @on-search="onSearch">
                    </i-input>
                </div>
                </#if>
                <#if ctrl.getPSControls()??>
                <#assign controls = ctrl.getPSControls()/>
                <#list controls as singleControl>
                <#if singleControl.getControlType() == "TOOLBAR">
                ${P.getCtrlCode(singleControl, 'CONTROL.html').code}
                </#if>
                </#list>
                </#if>
           </div>
            <div class='<#if ctrl.isShowTitleBar()>grid-exp-bar-content<#else>grid-exp-bar-content2</#if>'>
                <#if ctrl.getPSControls()??>
                <#assign controls = ctrl.getPSControls()/>
                <#list controls as singleControl>
                <#if singleControl.getControlType() == "GRID">
                ${P.getCtrlCode(singleControl, 'CONTROL.html').code}
                </#if>
                </#list>
                </#if>
            </div>
        </div>
        <div slot='<#if view.getSideBarLayout()?? && view.getSideBarLayout() == "LEFT">right<#else>bottom</#if>'>
            <component 
              v-if="selection.view && !Object.is(this.selection.view.viewname, '')" 
              :is="selection.view.viewname"
              class="viewcontainer2"
              :viewDefaultUsage="false"
              :viewdata="JSON.stringify(selection.data)">
            </component>
        </div>
    </split>
    </#if>
</template>


<#ibizinclude>
../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl
</#ibizinclude>

<#if view.getPSAppViewLogics?? && view.getPSAppViewLogics()??>
  <#list view.getPSAppViewLogics() as logic>
    <#if logic.getPFLogicCodeType() == 'APP_NEWDATA'>
    /**
     * 打开新建数据视图
     *
     * @type {any}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
68
    @Prop() public newdata: any;
69 70 71 72 73 74 75 76
    </#if>
    <#if logic.getPFLogicCodeType() == 'APP_OPENDATA'>
    /**
     * 打开编辑数据视图
     *
     * @type {any}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
77
    @Prop() public opendata: any;
78 79 80 81 82 83 84 85 86 87
    </#if>
  </#list>
</#if>

    /**
     * 视图唯一标识
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
88
    @Prop() public viewUID!:string;
89 90 91 92

    /**
     * 是否单选
     * 
93
     * @public
94 95 96
     * @type {(boolean)}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
97
    public isSingleSelect:boolean = true;
98 99 100 101

    /**
     * 呈现模式,可选值:horizontal或者vertical
     * 
102
     * @public
103 104 105
     * @type {(string)}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
106
    public showMode:string ="<#if view.getSideBarLayout()?? && view.getSideBarLayout() == "LEFT">horizontal<#else>vertical</#if>";
107 108 109 110 111 112 113

    /**
     * 控件宽度
     *
     * @type {number}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
114
    public ctrlWidth:number = <#if ctrl.getWidth()??>${ctrl.getWidth()}<#else>0</#if>;
115 116 117 118 119 120 121

    /**
     * 控件高度
     *
     * @type {number}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
122
    public ctrlHeight: number = <#if ctrl.getHeight()??>${ctrl.getHeight()}<#else>0</#if>;
123 124 125 126 127 128 129

    /**
     * 选中数据
     *
     * @type {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
130
    public selection: any = {};
131 132 133 134

    /**
     * 搜素值
     * 
135
     * @public
136 137 138
     * @type {(string)}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
139
    public searchText:string = "";
140 141 142 143 144 145 146

    /**
     * 分割宽度
     *
     * @type {number}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
147
    public split: number = 0.5;
148 149 150 151 152 153 154 155 156
<#if ctrl.getXDataPSControl()??>
<#assign xDataControl = ctrl.getXDataPSControl() />

    /**
     * 导航视图名称
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
157
    public navViewName: string = "<#if xDataControl.getNavPSAppView()??><#assign navPSAppView = xDataControl.getNavPSAppView() />${srffilepath2(navPSAppView.getCodeName())}</#if>";
158 159 160 161 162 163 164

    /**
     * 导航视图参数
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
165
    public navViewParam: string = '<#if xDataControl.getNavViewParamJO()??>${xDataControl.getNavViewParamJO()}</#if>';
166 167 168 169 170 171 172

    /**
     * 导航过滤项
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
173
    public navFilter: string = "<#if xDataControl.getNavFilter()??>${xDataControl.getNavFilter()}</#if>";
174 175 176 177 178 179 180 181
</#if>

    /**
     * 显示处理提示
     *
     * @type {boolean}
     * @memberof MOBILEENTITY3Canlen
     */
182
    @Prop({ default: true }) public showBusyIndicator!: boolean;
183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290

    <#if ctrl.getPSControls()??>
    <#assign controls = ctrl.getPSControls()/>
    <#list controls as singleControl>
    <#if singleControl.getControlType() == "TOOLBAR">

    ${P.getCtrlCode(singleControl, 'CONTROL.vue').code}
    </#if>
    </#list>
    </#if>

    /**
     * split值变化事件
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public onSplitChange() {
        if(this.split){
          this.$store.commit("setViewSplit",{viewUID:this.viewUID,viewSplit:this.split});
        }
    }

    /**
     * 获取多项数据
     *
     * @returns {any[]}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public getDatas(): any[] {
        return [];
    }

    /**
     * 获取单项树
     *
     * @returns {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public getData(): any {
        return null;
    }

    /**
    * Vue声明周期(组件初始化完毕)
    *
    * @memberof ${srfclassname('${ctrl.codeName}')}Base
    */
    public created() {
         this.afterCreated();     
    }

    /**
    * 执行created后的逻辑
    *
    * @memberof ${srfclassname('${ctrl.codeName}')}Base
    */
    public afterCreated(){
        if (this.viewState) {
            this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
                if (!Object.is(tag, this.name)) {
                    return;
                }
                <#if ctrl.getXDataPSControl?? && ctrl.getXDataPSControl()??>
                <#assign xDataControl = ctrl.getXDataPSControl() />
                this.viewState.next({ tag: '${xDataControl.getName()}', action: action, data: data });
                </#if>
            });
        } 
    }

    /**
    * Vue声明周期(组件渲染完毕)
    *
    * @memberof ${srfclassname('${ctrl.codeName}')}Base
    */
    public mounted() {
        this.afterMounted();     
    }

    /**
    * 执行mounted后的逻辑
    *
    * @memberof ${srfclassname('${ctrl.codeName}')}Base
    */
    public afterMounted(){ 
        if(this.$store.getters.getViewSplit(this.viewUID)){
            this.split = this.$store.getters.getViewSplit(this.viewUID);
        }else{
            let containerWidth:number = (document.getElementById("${ctrl.getCodeName()?lower_case}") as any).offsetWidth;
            let containerHeight:number = (document.getElementById("${ctrl.getCodeName()?lower_case}") as any).offsetHeight;
            if(Object.is(this.showMode,'horizontal')){
                if(this.ctrlWidth){
                    this.split = this.ctrlWidth/containerWidth;
                }
            }else{
                if(this.ctrlHeight){
                    this.split = this.ctrlHeight/containerHeight;
                }
            }
            this.$store.commit("setViewSplit",{viewUID:this.viewUID,viewSplit:this.split});
        }  
    }

    /**
     * vue 生命周期
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
291
    public destroyed() {
292 293 294 295 296 297 298 299
        this.afterDestroy();
    }

    /**
     * 执行destroyed后的逻辑
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
300
    public afterDestroy() {
301 302 303 304 305 306 307 308 309 310 311 312 313
        if (this.viewStateEvent) {
            this.viewStateEvent.unsubscribe();
        }
        <#if destroyed_block??>
        ${destroyed_block}
        </#if>
    }

    /**
    * 执行搜索
    *
    * @memberof ${srfclassname('${ctrl.codeName}')}Base
    */
314
    public onSearch($event:any) {
315 316 317 318 319 320 321 322 323 324 325 326 327
        <#if ctrl.getXDataPSControl()??>
        <#assign xDataControl = ctrl.getXDataPSControl()/>
        let grid:any = this.$refs.${xDataControl.getName()};
        grid.load({ query: this.searchText });
        </#if>
        
    }

    /**
     * ${ctrl.name}的选中数据事件
     * 
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
328
    public ${ctrl.name}_selectionchange(args: any [], tag?: string, $event2?: any): void {
329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355
        let data:any = {};
        if (args.length === 0) {
            return ;
        }
        const arg:any = args[0];
        <#if ctrl.getXDataPSControl()??>
        <#assign xDataControl = ctrl.getXDataPSControl()/>
        <#if xDataControl.getPSAppDataEntity()??>
        <#assign curDataEntity = xDataControl.getPSAppDataEntity()/>
        Object.assign(data,{'${curDataEntity.getCodeName()?lower_case}':arg['${curDataEntity.getCodeName()?lower_case}']});
        Object.assign(data,{srfparentdename:'${curDataEntity.getCodeName()}',srfparentkey:arg['${curDataEntity.getCodeName()?lower_case}']});
        </#if>
        </#if>
        if(this.context){
            Object.assign(data,JSON.parse(JSON.stringify(this.context)));
        }
        this.selection = {};
        Object.assign(this.selection, { view: { viewname: this.navViewName }, data:data });
        this.$emit('selectionchange',args);
        this.$forceUpdate();
    }

    /**
     * ${ctrl.name}的load完成事件
     * 
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
356
    public ${ctrl.name}_load(args:any, tag?: string, $event2?: any){
357 358 359 360 361 362 363 364 365
        this.$emit('load',args);
    }
<#ibizinclude>
../@MACRO/CONTROL/CONTROL_BOTTOM-BASE.vue.ftl
</#ibizinclude>

<#ibizinclude>
../@MACRO/CONTROL/CONTROL-BASE.style.ftl
</#ibizinclude>