CONTROL-BASE.vue.ftl 16.7 KB
Newer Older
1
<template>
2 3 4 5
<#if ctrl.render??>
${ctrl.render.code}
<#else>
    <layout class="app-wizard<#if ctrl.getPSSysCss?? && ctrl.getPSSysCss()??> ${ctrl.getPSSysCss().getCssName()}</#if>">
6
<#if ctrl.getPSDEWizard?? && ctrl.getPSDEWizard()?? && ctrl.getPSDEWizard().getPSDEWizardSteps?? && ctrl.getPSDEWizard().getPSDEWizardSteps()??>
7
    <el-steps class="wizard-steps" v-if="isShowStepBar"  :active="wizardForms.indexOf(activeForm)" finish-status="success" align-center>
8
    <#list ctrl.getPSDEWizard().getPSDEWizardSteps() as step>
9
      <el-step title="${step.getTitle()}"></el-step>
10
    </#list>
11
    </el-steps>
12 13 14 15 16 17
</#if>
        <i-content class="app-wizard-content">
<#if ctrl.getPSDEEditForms()??>
  <#list ctrl.getPSDEEditForms() as form>
    <#assign handler = form.getPSAjaxControlHandler() />
            <view_${form.getName()} 
18
              v-show="activeForm == '${form.getName()}'" 
19 20 21
              :key="'${form.name}'" 
              :viewState='wizardState'
              :context="context"
22
              :viewtag="viewtag"
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
              :viewparams="viewparams"
              updateAction="<#if form.getUpdatePSControlAction()?? && form.getUpdatePSControlAction().getPSAppDEMethod()??>${form.getUpdatePSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
              removeAction="<#if form.getRemovePSControlAction()?? && form.getRemovePSControlAction().getPSAppDEMethod()??>${form.getRemovePSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
              loadAction="<#if form.getGetPSControlAction()?? && form.getGetPSControlAction().getPSAppDEMethod()??>${form.getGetPSControlAction().getPSAppDEMethod().getCodeName()}</#if>"
      <#if form.getHookEventNames()??>
        <#list form.getHookEventNames() as eventName>
              @${eventName?lower_case}="${form.name}_${eventName?lower_case}" 
        </#list>
      </#if>
              name='${form.name}' 
              ref='${form.name}'>
            </view_${form.getName()}>
  </#list>
</#if>
        </i-content>
        <footer class="app-wizard-footer">
39 40 41
            <i-button v-show="!isHidden('PREV')" @click="onClickPrev()" type="primary">{{$t('app.wizardPanel.back')}}</i-button>
            <i-button v-show="!isHidden('NEXT')" @click="onClickNext()" type="primary">{{$t('app.wizardPanel.next')}}</i-button>
            <i-button v-show="!isHidden('FINISH')" @click="onClickFinish()" type="primary">{{$t('app.wizardPanel.complete')}}</i-button>
42 43
        </footer>
    </layout>
44
</#if>
45 46 47 48
</template>
<#ibizinclude>
../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl
</#ibizinclude>
tony001's avatar
tony001 committed
49

50 51 52 53
    /**
     * 部件行为--init
     *
     * @type {string}
KK's avatar
KK committed
54
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
55
     */
56
    @Prop() public initAction!: string;
57 58 59 60 61
    
    /**
     * 部件行为--finish
     *
     * @type {string}
KK's avatar
KK committed
62
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
63
     */
64
    @Prop() public finishAction!: string;
65 66 67 68 69

    /**
     * 显示处理提示
     *
     * @type {boolean}
KK's avatar
KK committed
70
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
71
     */
72
    @Prop({ default: true }) public showBusyIndicator?: boolean;
73

74 75 76 77 78 79 80 81
    /**
     * 视图标识
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    @Prop() public viewtag!: string;

tony001's avatar
tony001 committed
82 83 84 85 86 87
    /**
     * 状态属性
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
88
    public stateField: string = '<#if ctrl.getStatePSAppDEField?? && ctrl.getStatePSAppDEField()??>${ctrl.getStatePSAppDEField().getCodeName()?lower_case}</#if>';
tony001's avatar
tony001 committed
89

tony001's avatar
tony001 committed
90 91 92 93 94 95 96 97
    /**
     * 步骤标识集合
     *
     * @type {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public stepTags: any = {};

98 99 100 101 102 103
    /**
     * 显示步骤栏
     *
     * @type {Boolean}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
104
    public isShowStepBar: Boolean =  ${ctrl.isShowStepBar()?c} ;
105

106 107 108 109
    /**
      * 获取多项数据
      *
      * @returns {any[]}
KK's avatar
KK committed
110
      * @memberof ${srfclassname('${ctrl.codeName}')}Base
111 112 113 114 115 116 117 118 119
      */
    public getDatas(): any[] {
        return [this.formParam];
    }

    /**
      * 获取单项数据
      *
      * @returns {*}
KK's avatar
KK committed
120
      * @memberof ${srfclassname('${ctrl.codeName}')}Base
121 122 123 124 125 126 127 128
      */
    public getData(): any {
        return this.formParam;
    }

    /**
     * 视图状态订阅对象
     *
129
     * @public
130
     * @type {Subject<{action: string, data: any}>}
KK's avatar
KK committed
131
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
132
     */
133
    public wizardState: Subject<ViewState> = new Subject();
134 135 136 137 138

    /**
     * 当前激活表单
     *
     * @type {string}
KK's avatar
KK committed
139
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
140 141 142 143 144 145 146 147 148 149 150 151
     */
    <#if ctrl.getPSDEWizard()?? && ctrl.getPSDEWizard().getFirstPSDEWizardForm()??>
    <#assign firstForm = ctrl.getPSDEWizard().getFirstPSDEWizardForm()>
    public activeForm: string = '${ctrl.name}_form_${firstForm.getFormTag()}';
    <#else>
    public activeForm: string = '';
    </#if>

    /**
     * 向导表单参数
     *
     * @type {*}
KK's avatar
KK committed
152
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
153 154 155 156 157 158
     */
    public formParam: any = {};

    /**
     * 执行过的表单
     *
159
     * @public
160
     * @type {Array<string>}
KK's avatar
KK committed
161
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
162 163 164 165 166 167 168
     */
    public historyForms: Array<string> = [];

    /**
     * 步骤行为集合
     *
     * @type {*}
KK's avatar
KK committed
169
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
170 171 172 173 174 175 176
     */
    public stepActions: any = {};

    /**
     * 向导表单集合
     *
     * @type {Array<any>}
KK's avatar
KK committed
177
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
178 179 180 181 182 183
     */
    public wizardForms: Array<any> = [];

    /**
     * 当前状态
     *
KK's avatar
KK committed
184
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
185 186 187 188 189 190
     */
    public curState = '';

    /**
     * Vue声明周期(处理组件的输入属性)
     *
KK's avatar
KK committed
191
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
192 193 194
     */
    public created(): void {
        this.regFormActions();
tony001's avatar
tony001 committed
195
        if(this.activeForm && !this.stateField) {
196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211
            this.historyForms.push(this.activeForm);
        }
        if (this.viewState) {
            this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
                if (Object.is(tag, this.name)) {
                    if (Object.is('load', action)) {
                        this.doInit(data);
                    }
                }
            });
        }
    }

    /**
     * vue 生命周期
     *
KK's avatar
KK committed
212
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
213 214 215 216 217 218 219 220 221 222 223 224 225
     */
    public destroyed() {
        if (this.viewStateEvent) {
            this.viewStateEvent.unsubscribe();
        }
        <#if destroyed_block??>
        ${destroyed_block}
        </#if>
    }

    /**
     * 注册表单步骤行为
     *
KK's avatar
KK committed
226
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
227 228 229 230
     */
    public regFormActions() {
      <#if ctrl.getPSDEWizard()?? && ctrl.getPSDEWizard().getPSDEWizardForms()??>
        <#list ctrl.getPSDEWizard().getPSDEWizardForms() as form>
231
        this.regFormAction('${ctrl.name}_form_${form.getFormTag()}',{<#if form.getLoadPSDEAction?? && form.getLoadPSDEAction()??>loadAction:"${form.getLoadPSDEAction().getCodeName()}",</#if><#if form.getGoBackPSDEAction?? && form.getGoBackPSDEAction()??>preAction:'${form.getGoBackPSDEAction().getCodeName()}',</#if><#if form.getSavePSDEAction?? && form.getSavePSDEAction()??>saveAction:'${form.getSavePSDEAction().getCodeName()}',</#if><#if form.getStepActions()??>actions:[<#list form.getStepActions() as action><#if action_index gt 0>,</#if>'${action}'</#list>]</#if>},<#if form.getPSDEWizardStep()?? && form.getPSDEWizardStep().getStepTag()??>'${form.getPSDEWizardStep().getStepTag()}'<#else>null</#if>);
232 233 234 235 236 237 238
        </#list>
      </#if>
    }

    /**
     * 注册表单步骤行为
     *
KK's avatar
KK committed
239
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
240
     */
tony001's avatar
tony001 committed
241 242 243
    public regFormAction(name: string, actionParams: any,stepTag:any) {
        this.stepActions[name] = actionParams;
        this.stepTags[name] = stepTag;
244 245 246 247 248 249
        this.wizardForms.push(name);
    }

    /**
     * 初始化行为
     *
KK's avatar
KK committed
250
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
251 252 253 254 255 256 257 258 259 260 261 262 263
     */
    public doInit(opt: any = {}) {
        <#if ctrl.getPSDEWizard()?? && ctrl.getPSDEWizard().getInitPSDEAction()??>
        <#assign action = ctrl.getPSDEWizard().getInitPSDEAction()>
        const arg: any = { ...opt };
        Object.assign(arg,{viewparams:this.viewparams});
        const post: Promise<any> = this.service.init(this.initAction, JSON.parse(JSON.stringify(this.context)), arg, this.showBusyIndicator);
        post.then((response: any) => {
            if (response && response.status === 200) {
                this.formParam = response.data;
                if(response.data.${ctrl.getPSAppDataEntity().getCodeName()?lower_case}){
                    Object.assign(this.context,{${ctrl.getPSAppDataEntity().getCodeName()?lower_case}:response.data.${ctrl.getPSAppDataEntity().getCodeName()?lower_case}})
                }
tony001's avatar
tony001 committed
264
                this.formLoad(this.formParam);
265 266 267 268 269
            }
        }).catch((response: any) => {
            if (response && response.status === 401) {
                return;
            }
270
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.info });
271 272 273 274 275 276 277
        });
        </#if>
    }

    /**
     * 表单加载
     *
KK's avatar
KK committed
278
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
279
     */
tony001's avatar
tony001 committed
280 281
    public formLoad(data:any) {
        if(this.stateField) this.computedActiveForm(data);
282
        if(this.activeForm) {
tony001's avatar
tony001 committed
283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301
            this.wizardState.next({ tag: this.activeForm, action:'panelaction',data: {action:this.stepActions[this.activeForm].loadAction,emitAction:'load',data:this.formParam} });
        }
    }

    /**
     * 根据状态获取当前激活表单
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public computedActiveForm(data:any){
        if(data && data[this.stateField]){
            if(Object.keys(this.stepTags).length >0){
                Object.keys(this.stepTags).forEach((name:string) =>{
                    if(this.stepTags[name] === data[this.stateField]){
                        this.activeForm = name;
                        return;
                    }
                })
            }
302 303 304 305 306 307
        }
    }

    /**
     * 完成行为
     *
KK's avatar
KK committed
308
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
309 310 311 312 313 314 315 316 317 318 319
     */
    public doFinish() {
        <#if ctrl.getPSDEWizard()?? && ctrl.getPSDEWizard().getFinishPSDEAction()??>
        <#assign action = ctrl.getPSDEWizard().getFinishPSDEAction()>
        let arg: any = {};
        Object.assign(arg, this.formParam);
        Object.assign(arg,{viewparams:this.viewparams});
        const post: Promise<any> = this.service.finish(this.finishAction, JSON.parse(JSON.stringify(this.context)), arg, this.showBusyIndicator);
        post.then((response: any) => {
            if (response && response.status === 200) {
                const data = response.data;
320
                this.$Notice.success({ title: this.$t('app.commonWords.success') as string, desc: this.$t('app.commonWords.startsuccess') as string });
321
                this.$emit("finish", data);
322
                AppCenterService.notifyMessage({name:"${ctrl.getPSAppDataEntity().getCodeName()}",action:'appRefresh',data:data});
323 324 325 326 327
            }
        }).catch((response: any) => {
            if (response && response.status === 401) {
                return;
            }
328
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.info });
329 330 331 332 333 334 335 336 337
        });
        </#if>
    }

    /**
     * 向导表单加载完成
     *
     * @param {*} args
     * @param {string} name
KK's avatar
KK committed
338
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
339 340 341 342
     */
    public ${ctrl.name}_formload(args: any, name: string, $event2?: any) {
        if(args) {
            Object.assign(this.formParam, args);
343
            if (Object.is(this.curState, 'NEXT') || Object.is(this.curState, 'PREV')) {
344 345
                this.$store.commit('viewaction/setViewDataChange', { viewtag: this.viewtag, viewdatachange: true });
            }
346 347 348 349 350 351 352 353
        }
    }

    /**
     * 向导表单保存完成
     *
     * @param {*} args
     * @param {string} name
KK's avatar
KK committed
354
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
355 356 357 358 359
     */
    public ${ctrl.name}_formsave(args: any, name: string, $event2?: any) {
        Object.assign(this.formParam, args);
        if(Object.is(this.curState, 'NEXT')) {
            this.historyForms.push(name);
tony001's avatar
tony001 committed
360 361 362 363 364 365 366 367 368 369
            if(!this.stateField){
                if (this.getNextForm()) {
                    this.activeForm = this.getNextForm();
                    setTimeout(() => {
                        this.formLoad(this.formParam);
                    }, 1);
                } else {
                    this.doFinish();
                }
            }else{
370 371 372
                setTimeout(() => {
                    this.formLoad(this.formParam);
                }, 1);
373
            }
374 375 376 377 378 379
        }else if(Object.is(this.curState, 'PREV')) {
            if(this.stateField){
                setTimeout(() => {
                    this.formLoad(this.formParam);
                }, 1);
            }
380 381 382 383 384 385 386 387
        }else if(Object.is(this.curState, 'FINISH')) {
            this.doFinish();
        }
    }

    /**
     * 获取下一步向导表单
     *
KK's avatar
KK committed
388
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
389 390 391 392 393 394 395 396 397 398 399 400 401 402 403
     */
    public getNextForm() {
        let index = this.wizardForms.indexOf(this.activeForm);
        if(index >= 0) {
            if(this.wizardForms[index + 1]) {
                return this.wizardForms[index + 1];
            }
        }
        return undefined;
    }


    /**
     * 上一步
     *
KK's avatar
KK committed
404
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
405 406
     */
    public onClickPrev() {
tony001's avatar
tony001 committed
407 408 409 410 411 412 413 414 415 416 417 418 419 420
        if(!this.stateField){
            const length = this.historyForms.length;
            if(length > 1) {
                this.curState = 'PREV';
                this.activeForm = this.historyForms[length - 1];
                setTimeout(() => {
                    this.formLoad(this.formParam);
                }, 1);
                this.historyForms.splice(length - 1, 1);
            }
        }else{
            if(this.activeForm) {
                if(this.$refs && this.$refs[this.activeForm]){
                    let form: any = this.$refs[this.activeForm];
421 422 423 424
                    this.curState = 'PREV';
                    if(!this.stepActions[this.activeForm].preAction){
                        this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc:this.$t('app.wizardPanel.preactionmessage') as string  });
                        return;
tony001's avatar
tony001 committed
425
                    }
426
                    this.wizardState.next({ tag: this.activeForm, action:'panelaction',data: {action:this.stepActions[this.activeForm].preAction,emitAction:'save',data:this.formParam} });
tony001's avatar
tony001 committed
427 428
                }
            }
429 430 431 432 433 434
        }
    }

    /**
     * 下一步
     *
KK's avatar
KK committed
435
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
436 437 438 439 440 441 442
     */
    public onClickNext() {
        if(this.activeForm) {
            if(this.$refs && this.$refs[this.activeForm]){
                let form: any = this.$refs[this.activeForm];
                if(form.formValidateStatus()) {
                    this.curState = 'NEXT';
tony001's avatar
tony001 committed
443
                    this.wizardState.next({ tag: this.activeForm, action:'panelaction',data: {action:this.stepActions[this.activeForm].saveAction,emitAction:'save',data:this.formParam} });
444
                } else {
445
                    this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: (this.$t('app.commonWords.rulesException') as string) });
446 447 448 449 450 451 452 453
                }
            }
        }
    }

    /**
     * 完成
     *
KK's avatar
KK committed
454
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
455 456 457 458 459 460 461
     */
    public onClickFinish() {
        if(this.activeForm) {
            if(this.$refs && this.$refs[this.activeForm]){
                let form: any = this.$refs[this.activeForm];
                if(form.formValidateStatus()) {
                    this.curState = 'FINISH';
tony001's avatar
tony001 committed
462
                    this.wizardState.next({ tag: this.activeForm, action:'panelaction',data: {action:this.stepActions[this.activeForm].saveAction,emitAction:'save',data:this.formParam} });
463
                } else {
464
                    this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: (this.$t('app.commonWords.rulesException') as string) });
465 466 467 468 469 470
                }
            }
        }
    }

    /**
471
     * 是否隐藏
472 473
     *
     * @param {string} type
KK's avatar
KK committed
474
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
475
     */
476
    public isHidden(type: string) {
tony001's avatar
tony001 committed
477
        const actions: Array<string> = this.stepActions[this.activeForm].actions;
478 479 480 481 482 483 484 485 486 487 488 489 490 491
        if(actions && actions.indexOf(type) < 0) {
            return true;
        }
        return false;
    }
    

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

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