<template> <div class="app-picker-select-view"> <Dropdown :visible="visible" trigger="custom" style="left:0px;width: 100%" @on-clickoutside="() => {triggerMenu(false);}" > <Input v-model="inputValue" class="tree-input" type="text" :placeholder="placeholder" :disabled="disabled" @on-change="OnInputChange" @on-focus="()=>{triggerMenu(true);}" > <template v-slot:suffix> <i v-if="inputValue && !disabled" class='el-icon-circle-close' @click="onClear"></i> <Icon :type="visible ? 'ios-arrow-up' : 'ios-arrow-down'" class="icon-arrow" @click="() => {triggerMenu();}"></Icon> </template> </Input> <DropdownMenu slot="list"> <component :is="pickupView.viewname" :viewdata="viewdata" :viewparam="viewparam" :ifShowButtons="false" :viewDefaultUsage="false" @viewdataschange="setValue" style="height:100%;"> </component> </DropdownMenu> </Dropdown> </div> </template> <script lang="ts"> import { Vue, Component, Prop, Watch } from 'vue-property-decorator'; import { CreateElement } from 'vue'; import { Subject, Subscription } from 'rxjs'; import { ViewTool } from '@/utils/view-tool/view-tool'; @Component({}) export default class AppPickerSelectView extends Vue { /** * 视图上下文 * * @type {*} * @memberof AppFormDRUIPart */ @Prop() public context!: any; /** * 视图参数 * * @type {*} * @memberof AppFormDRUIPart */ @Prop() public viewparams!: any; /** * 视图参数 * * @type {string} * @memberof AppTreePicker */ public viewparam: any = JSON.stringify(this.viewparams);; /** * 视图上下文 * * @type {string} * @memberof AppTreePicker */ public viewdata: any = JSON.stringify(this.context); /** * 表单数据 * * @type {*} * @memberof AppPicker */ @Prop() public data!: any; /** * 值 * * @type {*} * @memberof AppTreePicker */ @Prop() public value: any; /** * 是否启用 * * @type {boolean} * @memberof AppPicker */ @Prop({default: false}) public disabled!: boolean; /** * 应用实体主信息属性名称 * * @type {string} * @memberof AppAutocomplete */ @Prop({default: 'srfmajortext'}) public deMajorField!: string; /** * 应用实体主键属性名称 * * @type {string} * @memberof AppAutocomplete */ @Prop({default: 'srfkey'}) public deKeyField!: string; /** * 输入框值 * * @type {string} * @memberof AppTreePicker */ public inputValue: any = ''; /** * 值项名称 * * @type {string} * @memberof AppPicker */ @Prop() public valueitem?: string; /** * 关联视图名称 * * @type {string} * @memberof AppPicker */ @Prop() public pickupView?: any; /** * 提示信息 * * @type {string} * @memberof AppTreePicker */ @Prop({default:"请选择..."}) public placeholder!: string; /** * 属性项名称 * * @type {string} * @memberof AppPicker */ @Prop() public name!: string; /** * 编辑器参数 * * @type {*} * @memberof AppTreePicker */ @Prop() public itemParam: any; /** * 下拉显示控制变量 * * @type {string} * @memberof AppTreePicker */ public visible: boolean = false; /** * 父视图数据 * * @type {string} * @memberof AppTreePicker */ public srfparentdata: any = {}; /** * 输入框change事件 * * @param $event 事件对象 * @memberof AppTreePicker */ public OnInputChange($event: any){ let _viewdata = Object.assign({ query: this.inputValue }, JSON.parse(this.viewdata)) ; this.viewdata = JSON.stringify(_viewdata); } /** * 输入框change事件 * * @param $event 事件对象 * @memberof AppTreePicker */ public triggerMenu(visible?: boolean){ if(this.disabled){ return; } if (!visible) { this.visible = !this.visible; } else { this.visible = visible; } } /** * 设置视图参数 * * @memberof AppTreePicker */ public setViewParam(formData: any) { if (!this.itemParam || !formData) { return; } let arg: any = {}; // 合并视图上下文参数和视图参数 let param: any = JSON.parse(JSON.stringify(this.viewparams)); let context: any = JSON.parse(JSON.stringify(this.context)); // 附加参数处理 if (this.itemParam.context) { let _context = this.$util.formatData(formData,this.itemParam.context); Object.assign(context,_context); } if (this.itemParam.param) { let _param = this.$util.formatData(formData,this.itemParam.param); Object.assign(param,_param); } if (this.itemParam.parentdata) { let _parentdata = this.$util.formatData(formData,this.itemParam.parentdata); Object.assign(param,_parentdata); } this.viewdata = JSON.stringify(context); this.viewparam = JSON.stringify(param); } /** * 监控值 * * @param {*} newVal * @param {*} oldVal * @memberof AppFormDRUIPart */ @Watch('data',{deep:true}) onActivedataChange(newVal: any, oldVal: any) { const newFormData: any = JSON.parse(newVal); const oldFormData: any = JSON.parse(oldVal); this.setViewParam(newFormData); } /** * 值变化 * * @param {*} newVal * @param {*} oldVal * @memberof AppPicker */ @Watch('value') public onValueChange(newVal: any, oldVal: any) { this.inputValue = newVal; } /** * 生命周期 * * @memberof AppTreePicker */ public created() { this.setViewParam(this.data); } /** * vue 生命周期 * * @memberof SelectType */ public destroyed() { } /** * 设置值 * * @param {*} item * @memberof AppTreePicker */ public setValue(item: any) { this.visible = false; if (this.valueitem) { let tempvalue = item[0][this.deMajorField] ? item[0][this.deKeyField] : item[0].srfkey; this.$emit('formitemvaluechange', { name: this.valueitem, value: item[0][this.deKeyField] }); } if (this.name) { let tempvalue = item[0][this.deMajorField] ? item[0][this.deMajorField] : item[0].srfmajortext; this.$emit('formitemvaluechange', { name: this.name, value: tempvalue }); } } /** * 清除 */ public onClear($event: any): void { if (this.valueitem) { this.$emit('formitemvaluechange', { name: this.valueitem, value: '' }); } if (this.name) { this.$emit('formitemvaluechange', { name: this.name, value: '' }); } this.$forceUpdate(); } } </script> <style lang='less'> @import './app-picker-select-view.less'; </style>