CONTROL-BASE.vue.ftl 10.4 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
<template>
<#if ctrl.render??>
    ${ctrl.render.code}
<#else>
    <split id="${ctrl.getCodeName()?lower_case}" class="app-dataview-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='dataview-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()>dataview-exp-bar-content<#else>dataview-exp-bar-content2</#if>'>
                <#if ctrl.getPSControls()??>
                <#assign controls = ctrl.getPSControls()/>
                <#list controls as singleControl>
                <#if singleControl.getControlType() == "DATAVIEW">
                ${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>

    /**
     * 视图唯一标识
     *
     * @type {boolean}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
65
    @Prop() public viewUID!:string;
66 67 68 69

    /**
     * 是否单选
     * 
70
     * @public
71 72 73
     * @type {(boolean)}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
74
    public isSingleSelect:boolean = true;
75 76 77 78

    /**
     * 呈现模式,可选值:horizontal或者vertical
     * 
79
     * @public
80 81 82
     * @type {(string)}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
83
    public showMode:string ="<#if view.getSideBarLayout()?? && view.getSideBarLayout() == "LEFT">horizontal<#else>vertical</#if>";
84 85 86 87 88 89 90

    /**
     * 控件宽度
     *
     * @type {number}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
91
    public ctrlWidth:number = <#if ctrl.getWidth()??>${ctrl.getWidth()?c}<#else>0</#if>;
92 93 94 95 96 97 98

    /**
     * 控件高度
     *
     * @type {number}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
99
    public ctrlHeight: number = <#if ctrl.getHeight()??>${ctrl.getHeight()?c}<#else>0</#if>;
100 101 102 103

    /**
     * 搜素值
     * 
104
     * @public
105 106 107
     * @type {(string)}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
108
    public searchText:string = "";
109 110 111 112 113 114 115

    /**
     * 分割宽度
     *
     * @type {number}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
116
    public split: number = 0.5;
117 118 119 120 121 122 123 124 125 126

<#if ctrl.getXDataPSControl()??>
<#assign xDataControl = ctrl.getXDataPSControl() />

    /**
     * 导航视图名称
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
127
    public navViewName: string = "<#if xDataControl.getNavPSAppView()??><#assign navPSAppView = xDataControl.getNavPSAppView() />${srffilepath2(navPSAppView.getCodeName())}</#if>";
128 129 130 131 132 133 134

    /**
     * 导航视图参数
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
135
    public navViewParam: string = '<#if xDataControl.getNavViewParamJO()??>${xDataControl.getNavViewParamJO()}</#if>';
136 137 138 139 140 141 142

    /**
     * 导航过滤项
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
143
    public navFilter: string = "<#if xDataControl.getNavFilter()??>${xDataControl.getNavFilter()}</#if>";
144 145 146 147 148 149 150 151
</#if>

    /**
     * 显示处理提示
     *
     * @type {boolean}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
152
    @Prop({ default: true }) public showBusyIndicator!: boolean;
153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189

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

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

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

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

    /**
     * 选中数据
     *
     * @type {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
190
    public selection: any = {};
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

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

    /**
    * 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.getPSDEDataView()??>
                <#assign dataview = ctrl.getPSDEDataView()/>
                this.viewState.next({ tag: '${dataview.name}', 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
     */
269
    public destroyed() {
270 271 272 273 274 275 276 277
        this.afterDestroy();
    }

    /**
     * 执行destroyed后的逻辑
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
278
    public afterDestroy() {
279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295
        if (this.viewStateEvent) {
            this.viewStateEvent.unsubscribe();
        }
        <#if destroyed_block??>
        ${destroyed_block}
        </#if>
    }

    /**
     * 卡片视图导航选中
     *
     * @param {any []} args
     * @param {string} [tag]
     * @param {*} [$event2]
     * @returns {void}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
296
    public ${ctrl.name}_selectionchange(args: any [], tag?: string, $event2?: any): void {
297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327
        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();
    }

    /**
     * 卡片视图加载完成
     *
     * @param {any[]} args
     * @param {string} [tag]
     * @param {*} [$event2]
     * @returns {void}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
328
    public ${ctrl.name}_load(args: any[], tag?: string, $event2?: any): void {
329 330 331 332 333 334 335 336
        this.$emit('load',args);
    }

    /**
    * 执行搜索
    *
    * @memberof ${srfclassname('${ctrl.codeName}')}Base
    */
337
    public onSearch() {
338 339 340 341 342 343 344 345 346 347 348 349 350
        <#if ctrl.getPSDEDataView()??>
        <#assign dataview = ctrl.getPSDEDataView()/>
        this.viewState.next({ tag: '${dataview.name}', action: 'filter', data: { query: this.searchText} });
        </#if>
    }

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

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