CONTROL-BASE.vue.ftl 12.9 KB
Newer Older
WodahsOrez's avatar
WodahsOrez committed
1
<template>
2 3 4
<#if ctrl.render??>
${ctrl.render.code}
<#else>
5
    <div class="app-searchbar<#if ctrl.getPSSysCss?? && ctrl.getPSSysCss()??> ${ctrl.getPSSysCss().getCssName()}</#if>">
JunZai's avatar
JunZai committed
6
        <div v-if="filterFields.length > 0" class="filter-group">
JunZai's avatar
JunZai committed
7 8 9 10
            <filter-tree :datas="filterItems" :fields="filterFields">
                <template slot-scope="{ data }">
                    <#if ctrl.getPSSearchBarFilters()??>
                    <#list ctrl.getPSSearchBarFilters() as filter>
JunZai's avatar
JunZai committed
11
                    <template v-if="Object.is(data.editor, '${filter.getName()}')">
JunZai's avatar
JunZai committed
12
                        ${P.getEditorCode(filter, "EDITOR.vue").code}
JunZai's avatar
JunZai committed
13
                    </template>
JunZai's avatar
JunZai committed
14 15 16 17
                    </#list>
                    </#if>
                </template>
            </filter-tree>
JunZai's avatar
JunZai committed
18
        </div>
JunZai's avatar
JunZai committed
19 20 21 22 23
        <div class="search-bar-footer">
            <#--  <#if !view.isEnableQuickSearch() && ctrl.getQuickSearchMode() gt 0>
            <i-input v-model="query" placeholder="<#if ctrl.getPSSearchBarQuickSearchs()??><#list ctrl.getPSSearchBarQuickSearchs() as search><#if search_index gt 0>,</#if><#if search.getPSDEField()??>${search.getPSDEField().getLogicName()}</#if></#list></#if>" style="<#if ctrl.getQuickSearchWidth() gt 0>width: ${ctrl.getQuickSearchWidth()?c}px;</#if>"></i-input>
            </#if>  -->
            <div class="search-bar-action">
JunZai's avatar
JunZai committed
24
                <el-select size="small" v-if="historyItems.length > 0" v-model="selectItem" @change="onFilterChange">
JunZai's avatar
JunZai committed
25 26
                    <el-option v-for="item in historyItems" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
27 28 29
                <i-button type="primary" @click="onSearch">{{ $t('app.searchButton.search') }}</i-button>
                <i-button @click="onReset">{{ $t('app.searchButton.reset') }}</i-button>
                <Poptip ref="propip" trigger="hover" placement="top-end" :title="$t('app.searchForm.custom')" :width="250" @on-popper-show="openPoper">
JunZai's avatar
JunZai committed
30 31 32
                    <i-button><i class="fa fa-floppy-o" aria-hidden="true"></i></i-button>
                    <template slot="content">
                        <div>
33
                            <i-input v-model="saveItemName" :placeholder="$t('app.searchForm.title')"></i-input>
JunZai's avatar
JunZai committed
34
                            <div class="save-action">
35 36
                                <i-button @click="onCancel">{{ $t('app.commonWords.cancel') }}</i-button>
                                <i-button type="primary" @click="onOk">{{ $t('app.commonWords.save') }}</i-button>
JunZai's avatar
JunZai committed
37 38 39 40
                            </div>
                        </div>
                    </template>
                </Poptip>
JunZai's avatar
JunZai committed
41 42
            </div>
        </div>
JunZai's avatar
JunZai committed
43
    </div>
44
</#if>
WodahsOrez's avatar
WodahsOrez committed
45
</template>
JunZai's avatar
JunZai committed
46 47
<#assign import_block>
import FilterTree from '@components/filter-tree/filter-tree.vue';
JunZai's avatar
JunZai committed
48
import moment from 'moment';
JunZai's avatar
JunZai committed
49 50 51 52 53 54
</#assign>

<#assign component_block>
FilterTree,
</#assign>

WodahsOrez's avatar
WodahsOrez committed
55 56 57 58
<#ibizinclude>
../@MACRO/CONTROL/CONTROL_HEADER-BASE.vue.ftl
</#ibizinclude>

JunZai's avatar
JunZai committed
59
    <#--  /**
JunZai's avatar
JunZai committed
60 61 62 63 64
     * 快速搜索值
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
JunZai's avatar
JunZai committed
65
    public query: string = '';  -->
JunZai's avatar
JunZai committed
66

JunZai's avatar
JunZai committed
67
    /**
JunZai's avatar
JunZai committed
68
     * 过滤属性集合
JunZai's avatar
JunZai committed
69 70 71 72
     *
     * @type {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
JunZai's avatar
JunZai committed
73
    get filterFields() {
JunZai's avatar
JunZai committed
74
        return Object.values(this.detailsModel);
JunZai's avatar
JunZai committed
75 76 77 78 79 80 81 82 83
    }

    /**
     * 过滤属性模型集合
     *
     * @type {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public detailsModel: any = {
JunZai's avatar
JunZai committed
84 85
        <#if ctrl.getPSSearchBarFilters()??>
        <#list ctrl.getPSSearchBarFilters() as filter>
JunZai's avatar
JunZai committed
86
        '${filter.getName()}': {
JunZai's avatar
JunZai committed
87
            label: '<#if filter.getPSDEField()??>${filter.getPSDEField().getLogicName()}</#if>',
JunZai's avatar
JunZai committed
88
            name: '${filter.getName()}',
JunZai's avatar
JunZai committed
89
            prop: '<#if filter.getPSDEField()??>${filter.getPSDEField().getCodeName()?lower_case}<#else>${filter.getName()}</#if>',
JunZai's avatar
JunZai committed
90 91 92
            <#if filter.getPSDEFSearchMode()??>
            mode: '${filter.getPSDEFSearchMode().getValueOP()}',
            </#if>
JunZai's avatar
JunZai committed
93 94
            disabled: false
        },
JunZai's avatar
JunZai committed
95 96
        </#list>
        </#if>
JunZai's avatar
JunZai committed
97
    };
JunZai's avatar
JunZai committed
98 99

    /**
JunZai's avatar
JunZai committed
100
     * 过滤项集合
JunZai's avatar
JunZai committed
101 102 103 104
     *
     * @type {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
JunZai's avatar
JunZai committed
105
    public filterItems: any[] = [];
JunZai's avatar
JunZai committed
106

JunZai's avatar
JunZai committed
107 108 109 110 111 112 113 114
    /**
     * 应用实体名称
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public appdeName: string = '<#if ctrl.getPSDataEntity()??>${ctrl.getPSDataEntity().getCodeName()}</#if>';

JunZai's avatar
JunZai committed
115 116 117 118 119 120
    /**
     * modleId
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
JunZai's avatar
JunZai committed
121
    public modelId: string = "searchbar_<#if ctrl.getPSAppDataEntity()??>${ctrl.getPSAppDataEntity().getCodeName()?lower_case}<#else>app</#if>_${ctrl.getCodeName()?lower_case}";
JunZai's avatar
JunZai committed
122 123 124 125 126 127 128

    /**
     * 功能服务名称
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
JunZai's avatar
JunZai committed
129
    public utilServiceName: string = "<#if app.getPSAppFilterStorageUtil?? && app.getPSAppFilterStorageUtil()??>${app.getPSAppFilterStorageUtil().getCodeName()?lower_case}</#if>";
JunZai's avatar
JunZai committed
130

JunZai's avatar
JunZai committed
131 132 133 134 135 136 137 138
    /**
     * 历史记录
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    protected historyItems: any[] = [];

JunZai's avatar
JunZai committed
139 140 141 142 143 144 145 146
    /**
     * 选中记录
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    protected selectItem: any = null;

JunZai's avatar
JunZai committed
147 148 149 150 151 152 153 154
    /**
     * 存储项名称
     *
     * @type {string}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    protected saveItemName: string = '';

WodahsOrez's avatar
WodahsOrez committed
155 156 157 158 159 160 161
    /**
     * 获取多项数据
     *
     * @returns {any[]}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public getDatas(): any[] {
162
        return [];
WodahsOrez's avatar
WodahsOrez committed
163 164 165 166 167 168 169 170 171
    }

    /**
     * 获取单项树
     *
     * @returns {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public getData(): any {
JunZai's avatar
JunZai committed
172
        let data: any = {};
JunZai's avatar
JunZai committed
173
        <#--  if(!Object.is(this.query, '')) {
JunZai's avatar
JunZai committed
174
            Object.assign(data, { query: this.query })
JunZai's avatar
JunZai committed
175 176
        }  -->
        if(this.filterFields.length > 0) {
JunZai's avatar
JunZai committed
177 178
            let filter: any = this.getFilter();
            Object.assign(data, { filter: filter ? JSON.stringify(filter) : null })
JunZai's avatar
JunZai committed
179 180
        }
        return data;
WodahsOrez's avatar
WodahsOrez committed
181 182
    }

JunZai's avatar
JunZai committed
183
    /**
JunZai's avatar
JunZai committed
184
     * 获取filter
JunZai's avatar
JunZai committed
185
     *
JunZai's avatar
JunZai committed
186
     * @return {*}
JunZai's avatar
JunZai committed
187 188
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
JunZai's avatar
JunZai committed
189
    public getFilter(): any {
JunZai's avatar
JunZai committed
190 191 192
        if(this.filterItems.length === 0) {
            return null;
        }
JunZai's avatar
JunZai committed
193 194
        let ands: any[] = this.transformAnd(this.filterItems);
        this.transformResult(ands, '$and');
JunZai's avatar
JunZai committed
195 196 197
        if(ands.length === 0) {
            return null;
        }
JunZai's avatar
JunZai committed
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
        return { '$and': ands };
    }

    /**
     * 处理结果集
     *
     * @return {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public transformResult(datas: any[], pName: string) {
        let items: any[] = [];
        for(let i = datas.length - 1; i >= 0; i--) {
            let data: any = datas[i];
            let field: string = Object.is(pName, '$and') ? '$or' : '$and';
            if(data.hasOwnProperty(field)) {
                items.push(data);
                datas.splice(i, 1);
                this.transformResult(data[field], field);
            }

        }
        if(items.length > 0) {
            let item: any = {};
            item[pName] = items;
            datas.push(item);
        }
JunZai's avatar
JunZai committed
224 225 226 227 228 229 230 231 232 233 234 235 236
    }

    /**
     * 处理并且逻辑
     *
     * @return {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public transformAnd(datas: any[]): any {
        let result: any[] = [];
        datas.forEach((data: any) => {
            let item: any = {};
            if(data.field && data.mode) {
JunZai's avatar
JunZai committed
237 238 239
                item[data.field] = {};
                let valField: string = data.editor ? data.editor : data.field;
                item[data.field][data.mode] = (data[valField] == null  ? '' : data[valField]);
JunZai's avatar
JunZai committed
240 241
                result.push(item)
            } else if(Object.is(data.label, '$and')) {
JunZai's avatar
JunZai committed
242 243
                let items: any[] = this.transformAnd(data.children);
                result = [...result, ...items];
JunZai's avatar
JunZai committed
244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262
            } else if(Object.is(data.label, '$or')) {
                item[data.label] = this.transformOr(data.children);
                result.push(item)
            }
        })
        return result;
    }

    /**
     * 处理或逻辑
     *
     * @return {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public transformOr(datas: any[]) {
        let result: any[] = [];
        datas.forEach((data: any) => {
            let item: any = {};
            if(data.field && data.mode) {
JunZai's avatar
JunZai committed
263 264 265
                item[data.field] = {};
                let valField: string = data.editor ? data.editor : data.field;
                item[data.field][data.mode] = (data[valField] == null ? '' : data[valField]);
JunZai's avatar
JunZai committed
266 267 268
                result.push(item);
            } else if(Object.is(data.label, '$and')) {
                item[data.label] = this.transformAnd(data.children);
JunZai's avatar
JunZai committed
269
                result.push(item)
JunZai's avatar
JunZai committed
270 271 272 273 274 275
            } else if(Object.is(data.label, '$or')) {
                item[data.label] = this.transformOr(data.children);
                result.push(item);
            }
        })
        return result;
JunZai's avatar
JunZai committed
276 277
    }

JunZai's avatar
JunZai committed
278 279 280 281 282 283 284 285 286 287 288 289 290 291 292
    /**
     * Vue声明周期(处理组件的输入属性)
     *
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public created(): void {
        if (this.viewState) {
            this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
                if (Object.is('load', action)) {
                    this.load(data);
                }
            });
        }
    }

JunZai's avatar
JunZai committed
293 294 295 296 297 298 299 300 301
    /**
     * 删除过滤项
     *
     * @return {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public onRemove(index: number) {
        this.filterItems.splice(index, 1);
    } 
JunZai's avatar
JunZai committed
302

JunZai's avatar
JunZai committed
303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318
    /**
     * 搜索
     *
     * @return {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public onSearch() {
        this.$emit('search', this.getData());
    }

    /**
     * 保存
     *
     * @return {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
JunZai's avatar
JunZai committed
319
    public onSave(name?: string) {
JunZai's avatar
JunZai committed
320 321
        let time = moment();
        this.historyItems.push({
JunZai's avatar
JunZai committed
322
            name: (name ? name : time.format('YYYY-MM-DD HH:mm:ss')),
JunZai's avatar
JunZai committed
323
            value: time.unix().toString(),
JunZai's avatar
JunZai committed
324 325
            data: JSON.parse(JSON.stringify(this.filterItems))
        })
JunZai's avatar
JunZai committed
326
        this.selectItem = time.unix().toString();
JunZai's avatar
JunZai committed
327

JunZai's avatar
JunZai committed
328 329
        let param: any = {};
		Object.assign(param, {
JunZai's avatar
JunZai committed
330
            model: JSON.parse(JSON.stringify(this.historyItems)),
JunZai's avatar
JunZai committed
331 332 333 334 335 336 337 338 339 340 341
            appdeName: this.appdeName,
            modelid: this.modelId,
            utilServiceName: this.utilServiceName,
			...this.viewparams
		});
		let post = this.service.saveModel(this.utilServiceName, this.context, param);
		post.then((response: any) => {
			this.$emit("save", response.data);
		}).catch((response: any) => {
			console.log(response);
		});
JunZai's avatar
JunZai committed
342 343 344 345 346 347 348 349 350
    }

    /**
     * 重置
     *
     * @return {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public onReset() {
JunZai's avatar
JunZai committed
351
        <#--  this.query = '';  -->
JunZai's avatar
JunZai committed
352
        this.filterItems = [];
JunZai's avatar
JunZai committed
353
    }
JunZai's avatar
JunZai committed
354 355 356 357 358 359 360 361 362

    /**
     * 加载
     *
     * @return {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public load(data: any) {
        let param: any = {};
JunZai's avatar
JunZai committed
363 364 365 366 367 368 369
        Object.assign(param, {
            appdeName: this.appdeName,
            modelid: this.modelId,
            utilServiceName: this.utilServiceName,
            ...this.viewparams
        });
        let post = this.service.loadModel(this.utilServiceName, this.context, param);
JunZai's avatar
JunZai committed
370 371
		post.then((response: any) => {
			if(response.status == 200) {
JunZai's avatar
JunZai committed
372
                this.historyItems = response.data;
JunZai's avatar
JunZai committed
373 374 375 376 377
			}
		}).catch((response: any) => {
			console.log(response);
		});
    }
JunZai's avatar
JunZai committed
378 379 380 381 382 383 384 385 386 387 388 389 390

    /**
     * 改变过滤条件
     *
     * @return {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public onFilterChange(evt: any) {
        let item: any = this.historyItems.find((item: any) => Object.is(evt, item.value));
        if(item) {
            this.filterItems = JSON.parse(JSON.stringify(item.data));
        }
    }
JunZai's avatar
JunZai committed
391 392

    /**
JunZai's avatar
JunZai committed
393
     * 打开弹框
JunZai's avatar
JunZai committed
394 395 396 397
     *
     * @return {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
JunZai's avatar
JunZai committed
398
    public openPoper() {
JunZai's avatar
JunZai committed
399 400 401 402 403 404 405 406 407 408
        this.saveItemName = '';
    }

    /**
     * 确定
     *
     * @return {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public onOk() {
JunZai's avatar
JunZai committed
409 410
        let propip: any = this.$refs.propip;
        propip.handleMouseleave();
JunZai's avatar
JunZai committed
411 412 413 414 415 416 417 418 419 420
        this.onSave(this.saveItemName);
    }

    /**
     * 取消设置
     *
     * @return {*}
     * @memberof ${srfclassname('${ctrl.codeName}')}Base
     */
    public onCancel() {
JunZai's avatar
JunZai committed
421 422
        let propip: any = this.$refs.propip;
        propip.handleMouseleave();
JunZai's avatar
JunZai committed
423 424
        this.onSave();
    }
WodahsOrez's avatar
WodahsOrez committed
425 426 427 428 429 430 431
<#ibizinclude>
../@MACRO/CONTROL/CONTROL_BOTTOM-BASE.vue.ftl
</#ibizinclude>

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