<template> <div class="app-mob-picker" > <ion-input :disabled="disabled" class="app-mob-picker__input" :value="refvalue" readonly @click="openView" @ionFocus="enter" @ionBlur="leave"></ion-input> <app-mob-icon v-show="refvalue" class="delete-value right-common-icon" name="close-circle-outline" @onClick="onClear"></app-mob-icon> <app-mob-icon v-show="refvalue == '' || refvalue == null" class="open-picker right-common-icon" name="search-outline" @onClick="openView"></app-mob-icon> </div> </template> <script lang="ts"> import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator'; import { Subject, Subscription } from 'rxjs'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; import { ViewOpenService } from 'ibiz-vue'; import { Http, ViewTool } from 'ibiz-core'; // import { DataServiceHelp } from 'ibiz-core'; @Component({ i18n: { messages: { 'ZH-CN': { missingParameters: '缺少参数!', requestException: '请求异常!', formDataIsAbnormal: '表单数据异常!', valueItemIsAbnormal: '值项异常!', systemIsAbnormal: '系统异常!' }, 'EN-US': { missingParameters: 'Missing parameters!', requestException: 'Request exception!', formDataIsAbnormal: 'Form data is abnormal!', valueItemIsAbnormal: 'Value item is abnormal!', systemIsAbnormal: 'The system is abnormal!' } } } }) export default class AppPicker extends Vue { /** * 视图上下文 * * @type {*} * @memberof AppPicker */ @Prop() public context!: any; /** * 视图参数 * * @type {*} * @memberof AppPicker */ @Prop() public viewparams!: any; /** * AC参数 * * @type {*} * @memberof AppPicker */ @Prop({ default: () => { } }) public acParams?: any; /** * 表单服务 * * @type {*} * @memberof AppPicker */ @Prop() public service?: any; /** * 应用实体主信息属性名称 * * @type {string} * @memberof AppPicker */ @Prop({ default: 'srfmajortext' }) public deMajorField!: string; /** * 应用实体主键属性名称 * * @type {string} * @memberof AppPicker */ @Prop({ default: 'srfkey' }) public deKeyField!: string; /** * 表单数据 * * @type {*} * @memberof AppPicker */ @Prop() public data!: any; /** * 属性项名称 * * @type {string} * @memberof AppPicker */ @Prop() public name!: string; /** * 是否启用 * * @type {boolean} * @memberof AppPicker */ @Prop() public disabled?: boolean; /** * 类型 * * @type {string} * @memberof AppPicker */ @Prop() public editortype?: string; /** * 视图参数(如:视图name,title,width,height) * * @type {*} * @memberof AppPicker */ @Prop() public pickupView?: any; /** * 数据链接参数 * * @type {*} * @memberof AppPicker */ @Prop() public linkview?: any; /** * 值项名称 * * @type {string} * @memberof AppPicker */ @Prop() public valueitem?: string; /** * 值 * * @type {*} * @memberof AppPicker */ @Model('change') public value!: any; /** * 导航参数 * * @type {*} * @memberof AppSelect */ @Prop() protected navigateParam?: any; /** * 导航上下文 * * @type {*} * @memberof AppSelect */ @Prop() protected navigateContext?: any; /** * 当前值 * * @type {string} * @memberof AppPicker */ public curvalue: string = ''; /** * 下拉数组 * @type {any[]} * @memberof AppPicker */ public items: any[] = []; /** * 下拉图标指向状态管理 * @type {boolean} * @memberof AppPicker */ public open: boolean = false; /** * 输入状态 * * @type {boolean} * @memberof AppPicker */ public inputState: boolean = false; /** * 视图打开服务 * * @type {ViewOpenService} * @memberof AppPicker */ public openService: ViewOpenService = ViewOpenService.getInstance(); /** * 获取关联数据项值 * * @readonly * @memberof AppPicker */ get refvalue() { return this.curvalue; } /** * 值变化 * * @param {*} newVal * @param {*} oldVal * @memberof AppPicker */ @Watch('value',{immediate:true}) public onValueChange(newVal: any, oldVal: any) { this.curvalue = newVal; if (Object.is(this.editortype, 'dropdown') && this.valueitem) { const value = this.data[this.valueitem]; const index = this.items.findIndex((item: any) => Object.is(item.value, value)); if (index !== -1) { return; } this.items = []; if (value) { this.items.push({ text: newVal, value: value }); } this.onSearch(newVal, null, false); } } /** * 文本输入防抖 * * @private * @type {Subject<any>} * @memberof IBizFormField */ private inputImageStabilization: Subject<any> = new Subject(); /** * 文本输入防抖订阅对象 * * @private * @type {(Subscription | undefined)} * @memberof AppPicker */ private inputImageStabilizationEvent: Subscription | undefined; /** * vue 生命周期 * * @memberof AppPicker */ public created() { if (this.acParams && this.service) { this.onSearch("", null, true); } this.inputImageStabilizationEvent = this.inputImageStabilization.pipe( debounceTime(200), distinctUntilChanged() ).subscribe( (query: any) => { const _query = query; if (this.name) { this.$emit('formitemvaluechange', { name: this.name, value: _query ? _query : null, event:{} }); } this.onSearch(_query, null, false); } ); } /** * 组件销毁 * * @memberof AppPicker */ public destroyed(): void { if (this.inputImageStabilizationEvent) { this.inputImageStabilizationEvent.unsubscribe(); } } /** * 执行搜索数据 * @param query * @param callback */ public async onSearch(query: any, callback: any, other: boolean): Promise<any> { // 公共参数处理 let data: any = {}; const bcancel: boolean = this.handlePublicParams(data); if (!bcancel) { return; } // 处理搜索参数 let _context = data.context; let _param = data.param; query = !query ? '' : query; if (!this.inputState && other && Object.is(query, this.value)) { query = ''; } this.inputState = false; Object.assign(_param, { query: query }); if (this.service.serviceName && this.service.interfaceName) { let { serviceName: _serviceName, interfaceName: _interfaceName }: { serviceName: string, interfaceName: string } = this.acParams; // TODO DataServiceHelp // const entityService: any = await new DataServiceHelp().getService(_serviceName); // if (entityService && entityService[_interfaceName] && entityService[_interfaceName] instanceof Function) { // entityService[_interfaceName](_context, _param).then((response: any) => { // if (!response) { // this.$Notice.error(`${this.$t("requestException")}`) // } else { // this.items = [...response.data]; // } // if (this.acParams && this.linkview) { // this.items.push({ isNew: true }); // } // if (callback) { // callback(this.items); // } // this.parseValue(); // }).catch((response: any) => { // if (callback) { // callback([]); // } // }); // } } } /** * 解析回填文本 */ public parseValue(){ let index = this.items.findIndex((item)=>{return Object.is(item[this.deKeyField],this.refvalue)}); if(index > -1){ this.curvalue = this.items[index][this.deMajorField]; } } /** * 选中数据回调 * @param item */ public onACSelect(item: any): void { if (this.valueitem) { this.$emit('formitemvaluechange', { name: this.valueitem, value: item[this.deKeyField], event:{} }); } if (this.name) { this.$emit('formitemvaluechange', { name: this.name, value: item[this.deMajorField], event:{} }); } } /** * 清除 */ public onClear($event: any): void { if (this.valueitem) { this.curvalue=""; this.$emit('formitemvaluechange', { name: this.valueitem, value: '', event:$event }); } if (this.name) { this.curvalue=""; this.$emit('formitemvaluechange', { name: this.name, value: '', event:$event }); } } /** * 打开视图 */ public async openView($event: any): Promise<any> { if (this.disabled) { return; } // 公共参数处理 let data: any = {}; const bcancel: boolean = this.handlePublicParams(data); if (!bcancel) { return; } const {param,context} = data; // 参数处理 const view = { ...this.pickupView }; if(!view.viewModelData?.codeName){ this.$Notice.error(this.$t('app.commonWords.notFoundPickerView')); return; } // 判断打开方式 const openMode = view.viewModelData.openMode; if(openMode && openMode.indexOf('DRAWER') != -1){ this.openDrawer(view, context, param); } else if(openMode === 'POPOVER'){ this.openPopOver(view, context, param); }else{ this.openPopupModal(view, context, param); } } /** * 路由模式打开视图 * * @private * @param {string} viewpath * @param {*} data * @memberof AppPicker */ private openIndexViewTab(view: any, context: any, param: any): void { const routeStr: any = this.openService.formatRouteParam(this.context, view.deResParameters, view.parameters, [context], param); this.$router.push(routeStr); } /** * 模态模式打开视图 * * @private * @param {*} view * @param {*} data * @memberof AppPicker */ private async openPopupModal(view: any, context: any, param: any): Promise<any> { let result: any = await this.openService.openModal(view, context, param); if (result || Object.is(result.ret, 'OK')) { this.openViewClose(result); } } /** * 气泡模式打开视图 * * @private * @param {*} view * @param {*} data * @memberof AppPicker */ private async openPopOver(view: any, context: any, param: any,customParam?:any): Promise<any> { let result: any = await this.openService.openPopOver(view, context, param,customParam); if (result || Object.is(result.ret, 'OK')) { this.openViewClose(result); } } /** * 抽屉模式打开视图 * * @private * @param {*} view * @param {*} data * @memberof AppPicker */ private async openDrawer(view: any, context: any, param: any) { let result: any = await this.openService.openDrawer(view, context, param); if (result || Object.is(result.ret, 'OK')) { this.openViewClose(result); } } /** * 独立里面弹出 * * @private * @param {string} url * @memberof AppPicker */ private openPopupApp(url: string): void { window.open(url, '_blank'); } /** * 打开重定向视图 * * @private * @param {*} $event * @param {*} view * @param {*} data * @memberof AppPicker */ private openRedirectView($event: any, view: any, data: any): void { Http.getInstance().get(view.url, data).then((response: any) => { if (!response || response.status !== 200) { this.$Notice.error(`${this.$t("requestException")}`); } if (response.status === 401) { return; } const { data: result } = response; if (result.viewparams && !Object.is(result.viewparams.srfkey, '')) { Object.assign(data, { srfkey: result.viewparams.srfkey }); } if (Object.is(result.openmode, 'POPUPAPP') && result.url && !Object.is(result.url, '')) { this.openPopupApp(result.url); } else if (Object.is(result.openmode, 'INDEXVIEWTAB') || Object.is(result.openmode, '')) { // 所有数据保持在同一级 if (data.srfparentdata) { Object.assign(data, data.srfparentdata); delete data.srfparentdata; } this.openIndexViewTab(view, null, data); } else if (Object.is(result.openmode, 'POPUPMODAL')) { const viewname = this.$util.srfFilePath2(result.viewname); const view: any = { viewname: viewname, title: result.title, width: result.width, height: result.height, } this.openPopupModal(view, null, data); } else if (result.openmode.startsWith('DRAWER')) { const viewname = this.$util.srfFilePath2(result.viewname); const view: any = { viewname: viewname, title: result.title, width: result.width, height: result.height, placement: result.openmode, } this.openDrawer(view, null, data); } }).catch((response: any) => { if (!response || !response.status || !response.data) { this.$Notice.error(`${this.$t('systemIsAbnormal')}`); return; } if (response.status === 401) { return; } }); } /** * 打开页面关闭 * * @param {*} result * @memberof AppPicker */ public openViewClose(result: any) { let item: any = {}; if (result.datas && Array.isArray(result.datas)) { Object.assign(item, result.datas[0]); } if (this.data) { if (this.valueitem) { this.$emit('formitemvaluechange', { name: this.valueitem, value: item[this.deKeyField] ? item[this.deKeyField] : item["srfkey"], event:{} }); } if (this.name) { this.$emit('formitemvaluechange', { name: this.name, value: item[this.deMajorField] ? item[this.deMajorField] : item["srfmajortext"], event:{} }); } } } /** * 公共参数处理 * * @param {*} arg * @returns * @memberof AppPicker */ public handlePublicParams(arg: any): boolean { if (!this.data) { return false; } // 导航参数处理 const {context, param} = ViewTool.formatNavigateParam( this.navigateContext, this.navigateParam, this.context, this.viewparams, this.data ); arg.context = context; arg.param = param; return true; } /** * 有焦点时事件 * * @memberof AppPicker */ public enter(e: any) { this.$emit('enter', {name: this.name, value: this.value, event:e}); } /** * 失去焦点事件 * * @memberof AppPicker */ public leave(e: any) { this.$emit('leave', {name: this.name, value: this.value, event:e}); } } </script>