Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 fb60118c 编写于 作者: tony001's avatar tony001
浏览文件
操作

调整数据选择(调用接口)组件

上级 2c709b72
隐藏空白字符变更
内嵌 并排
正在显示 包含 60 行增加 和 519 行删除
src/components/app-upicker/app-upicker.vue
浏览文件 @ fb60118c
<template>
<div v-if="Object.is(editortype, 'dropdown')" class='app-upicker'>
<el-select ref="appPicker" :value="refvalue" size='small' filterable
<div class='app-upicker'>
<el-select ref="appUpicker" :value="refvalue" size='small' filterable
@change="onSelect" :disabled="disabled" style='width:100%;' clearable
@clear="onClear" @visible-change="onSelectOpen">
<template v-if="items">
......@@ -21,12 +21,12 @@ import { AppModal } from '@/utils';
@Component({
})
export default class AppPicker extends Vue {
export default class AppUpicker extends Vue {
/**
* 请求到的数据
* @type {any[]}
* @memberof AppPicker
* @memberof AppUpicker
*/
public itemList: any[] = []
......@@ -58,7 +58,7 @@ export default class AppPicker extends Vue {
* 视图上下文
*
* @type {*}
* @memberof AppFormDRUIPart
* @memberof AppUpicker
*/
@Prop() public context!: any;
......@@ -66,47 +66,15 @@ export default class AppPicker extends Vue {
* 视图参数
*
* @type {*}
* @memberof AppFormDRUIPart
* @memberof AppUpicker
*/
@Prop() public viewparams!: any;
/**
* AC参数
*
* @type {*}
* @memberof AppFormDRUIPart
*/
@Prop({default: () => {}}) public acParams?: any;
/**
* 表单服务
*
* @type {*}
* @memberof AppFormDRUIPart
*/
@Prop() public service?: any;
/**
* 应用实体主信息属性名称
*
* @type {string}
* @memberof AppAutocomplete
*/
@Prop({default: 'srfmajortext'}) public deMajorField!: string;
/**
* 应用实体主键属性名称
*
* @type {string}
* @memberof AppAutocomplete
*/
@Prop({default: 'srfkey'}) public deKeyField!: string;
/**
* 表单数据
*
* @type {*}
* @memberof AppPicker
* @memberof AppUpicker
*/
@Prop() public data!: any;
......@@ -114,7 +82,7 @@ export default class AppPicker extends Vue {
* 属性项名称
*
* @type {string}
* @memberof AppPicker
* @memberof AppUpicker
*/
@Prop() public name!: string;
......@@ -122,7 +90,7 @@ export default class AppPicker extends Vue {
* 是否启用
*
* @type {boolean}
* @memberof AppPicker
* @memberof AppUpicker
*/
@Prop() public disabled?: boolean;
......@@ -130,39 +98,15 @@ export default class AppPicker extends Vue {
* 是否显示按钮
*
* @type {boolean}
* @memberof AppPicker
* @memberof AppUpicker
*/
@Prop({default:true}) public showButton?: 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 {any}
* @memberof AppPicker
* @memberof AppUpicker
*/
@Prop() public localContext!:any;
......@@ -170,7 +114,7 @@ export default class AppPicker extends Vue {
* 局部导航参数
*
* @type {any}
* @memberof AppPicker
* @memberof AppUpicker
*/
@Prop() public localParam!:any;
......@@ -178,7 +122,7 @@ export default class AppPicker extends Vue {
* 值项名称
*
* @type {string}
* @memberof AppPicker
* @memberof AppUpicker
*/
@Prop() public valueitem!: string;
......@@ -186,24 +130,15 @@ export default class AppPicker extends Vue {
* 排序
*
* @type {string}
* @memberof AppPicker
* @memberof AppUpicker
*/
@Prop() public sort?: string;
/**
* 行为组
*
* @type {Array<any>}
* @memberof AppPicker
*/
@Prop() public actionDetails?:Array<any>;
/**
* 值
*
* @type {*}
* @memberof AppPicker
* @memberof AppUpicker
*/
@Model('change') public value?: any;
......@@ -211,21 +146,21 @@ export default class AppPicker extends Vue {
* 当前值
*
* @type {string}
* @memberof AppPicker
* @memberof AppUpicker
*/
public curvalue: string = '';
/**
* 下拉数组
* @type {any[]}
* @memberof AppPicker
* @memberof AppUpicker
*/
public items: any[] = [];
/**
* 下拉图标指向状态管理
* @type {boolean}
* @memberof AppPicker
* @memberof AppUpicker
*/
public open: boolean = false;
......@@ -233,23 +168,15 @@ export default class AppPicker extends Vue {
* 输入状态
*
* @type {boolean}
* @memberof AppAutocomplete
* @memberof AppUpicker
*/
public inputState: boolean = false;
/**
* 当前选择的值
*
* @type {string}
* @memberof AppPicker
*/
public selectValue = this.value;
/**
* 获取关联数据项值
*
* @readonly
* @memberof AppPicker
* @memberof AppUpicker
*/
get refvalue() {
if (this.valueitem && this.data) {
......@@ -263,12 +190,13 @@ export default class AppPicker extends Vue {
*
* @param {*} newVal
* @param {*} oldVal
* @memberof AppPicker
* @memberof AppUpicker
*/
@Watch('value',{immediate:true})
public onValueChange(newVal: any, oldVal: any) {
this.curvalue = newVal;
if (Object.is(this.editortype, 'dropdown') && this.valueitem) {
this.analysis(this.itemParams);
if(newVal){
this.curvalue = newVal;
const value = this.data[this.valueitem];
const index = this.items.findIndex((item: any) => Object.is(item.value, value));
if (index !== -1) {
......@@ -278,45 +206,24 @@ export default class AppPicker extends Vue {
if (value) {
this.items.push({text: newVal, value: value});
}
this.fectchItemList(this.url);
}
}
/**
* vue 生命周期
*
* @memberof AppPicker
* @memberof AppUpicker
*/
public created() {
if(!Object.is(this.editortype, 'pickup-no-ac') && !Object.is(this.editortype, 'dropdown')){
this.curvalue = this.value;
}
}
/**
* vue 生命周期
*
* @memberof AppPicker
*/
public mounted() {
// 解析编辑器参数
// 解析编辑器参数
this.analysis(this.itemParams);
// 请求下拉数据
this.fectchItemList(this.url);
}
/**
* 组件销毁
*
* @memberof AppPicker
*/
public destroyed(): void {
}
/**
* 解析编辑器参数
* @param {*} itemparams
* @memberof AppPicker
*
* @memberof AppUpicker
*/
public analysis(itemparams:any) {
Object.keys(itemparams).forEach((param)=>{
......@@ -325,17 +232,20 @@ export default class AppPicker extends Vue {
}else{
this.interaction[param] = itemparams[param]
}
})
})
}
/**
* 请求下拉列表数据
* @param {string} url
* @memberof AppPicker
*
* @memberof AppUpicker
*/
public fectchItemList(url:string) {
let arg:any = {};
this.handlePublicParams(arg);
this.$http
.get(url)
.get(url,arg.param)
.then((response: any) => {
if (response && response.status==200 && response.data) {
this.itemList = response.data;
......@@ -358,21 +268,24 @@ export default class AppPicker extends Vue {
* 解析下拉列表数据
* @param {any[]} itemList 请求到的数据
* @param {any[]} items 下拉数组
* @memberof AppPicker
*
* @memberof AppUpicker
*/
public extractItem(itemList:any[],items:any[]) {
this.items.length = 0;
this.items = [];
itemList.forEach((item) => {
items.push({
this.items.push({
label: item[this.interaction.label],
value: item[this.interaction.value],
});
});
});
}
/**
* 下拉切换回调
* @param flag
*
* @memberof AppUpicker
*/
public onSelectOpen(flag: boolean): void {
this.open = flag;
......@@ -381,101 +294,29 @@ export default class AppPicker extends Vue {
}
}
/**
* 执行搜索数据
* @param query
* @param callback
*/
public onSearch(query: any, callback: any, other: boolean): void {
// 公共参数处理
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;
if(this.sort && !Object.is(this.sort, "")) {
Object.assign(_param, { sort: this.sort });
}
Object.assign(_param, { query: query, size: 1000 });
// 错误信息国际化
let error: string = (this.$t('components.appPicker.error') as any);
let miss: string = (this.$t('components.appPicker.miss') as any);
let requestException: string = (this.$t('components.appPicker.requestException') as any);
if(!this.service){
this.$Notice.error({ title: error, desc: miss+'service' });
} else if(!this.acParams.serviceName) {
this.$Notice.error({ title: error, desc: miss+'serviceName' });
} else if(!this.acParams.interfaceName) {
this.$Notice.error({ title: error, desc: miss+'interfaceName' });
} else {
this.service.getItems(this.acParams.serviceName,this.acParams.interfaceName, _context, _param).then((response: any) => {
if (!response) {
this.$Notice.error({ title: error, desc: requestException });
} else {
this.items = [...response];
}
// if(this.acParams && this.linkview){
// this.items.push({ isNew :true });
// }
if(this.acParams && this.actionDetails && this.actionDetails.length >0){
this.items = [...this.items,...this.actionDetails];
}
if (callback) {
callback(this.items);
}
}).catch((error: any) => {
if (callback) {
callback([]);
}
});
}
}
/**
* 选中数据回调
* @param item
*/
public onACSelect(item: any): void {
this.selectValue = item.value;
if (this.valueitem) {
this.$emit('formitemvaluechange', { name: this.valueitem, value: item.value });
}
if (this.name) {
this.$emit('formitemvaluechange', { name: this.name, value: item.value });
}
}
/**
* 下拉选中
*
* @param {string} val
* @memberof AppPicker
* @memberof AppUpicker
*/
public onSelect(val: string) {
let index = this.items.findIndex((item) => Object.is(item.value, val));
if (index >= 0) {
this.onACSelect(this.items[index]);
let item:any = this.items[index];
if (this.valueitem) {
this.$emit('formitemvaluechange', { name: this.valueitem, value: item.value });
}
if (this.name) {
this.$emit('formitemvaluechange', { name: this.name, value: item.label });
}
}
}
/**
* 失去焦点事件
* @param e
*/
public onBlur(e: any): void {
this.curvalue = this.value;
}
/**
* 清除
*
* @memberof AppUpicker
*/
public onClear($event: any): void {
if (this.valueitem) {
......@@ -487,254 +328,12 @@ export default class AppPicker extends Vue {
this.$forceUpdate();
}
/**
* 打开视图
*/
public openView($event: any): void {
if (this.disabled) {
return;
}
// 公共参数处理
let data: any = {};
const bcancel: boolean = this.handlePublicParams(data);
if (!bcancel) {
return;
}
// 参数处理
const view = { ...this.pickupView };
let _context = data.context;
let _param = data.param;
_param.selectedData = [{srfkey: this.data[this.valueitem], srfmajortext: this.curvalue }];
// 判断打开方式
if (view.placement && !Object.is(view.placement, '')) {
if (Object.is(view.placement, 'POPOVER')) {
this.openPopOver($event, view, _context, _param);
} else {
this.openDrawer(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 routePath = this.$viewTool.buildUpRoutePath(this.$route, this.context, view.deResParameters, view.parameters, [context] , param);
this.$router.push(routePath);
}
/**
* 模态模式打开视图
*
* @private
* @param {*} view
* @param {*} data
* @memberof AppPicker
*/
private openPopupModal(view: any, context: any, param: any): void {
let container: Subject<any> = this.$appmodal.openModal(view, context, param);
container.subscribe((result: any) => {
if (!result || !Object.is(result.ret, 'OK')) {
return;
}
this.openViewClose(result);
});
}
/**
* 抽屉模式打开视图
*
* @private
* @param {*} view
* @param {*} data
* @memberof AppPicker
*/
private openDrawer(view: any, context: any, param: any): void {
let container: Subject<any> = this.$appdrawer.openDrawer(view, context, param);
container.subscribe((result: any) => {
if (!result || !Object.is(result.ret, 'OK')) {
return;
}
this.openViewClose(result);
});
}
/**
* 气泡卡片模式打开
*
* @private
* @param {*} $event
* @param {*} view
* @param {*} data
* @memberof AppPicker
*/
private openPopOver($event: any, view: any, context: any, param: any): void {
let container: Subject<any> = this.$apppopover.openPop($event, view, context, param);
container.subscribe((result: any) => {
if (!result || !Object.is(result.ret, 'OK')) {
return;
}
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 {
this.$http.get(view.url, data).then((response: any) => {
if (!response || response.status !== 200) {
this.$Notice.error({ title: (this.$t('components.appPicker.error') as any), desc: (this.$t('components.appPicker.requestException') as any) });
}
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);
} else if (Object.is(result.openmode, 'POPOVER')) {
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.openPopOver($event, view, null, data);
}
}).catch((response: any) => {
if (!response || !response.status || !response.data) {
this.$Notice.error({ title: (this.$t('components.appPicker.error') as any), desc: (this.$t('components.appPicker.systemException') as any) });
return;
}
if (response.status === 401) {
return;
}
});
}
/**
* 打开链接视图
*
* @memberof AppPicker
*/
public openLinkView($event: any): void {
if (!this.data || !this.valueitem || !this.data[this.valueitem]) {
console.error({ title: (this.$t('components.appPicker.error') as any), desc: (this.$t('components.appPicker.valueitemException') as any) });
return;
}
// 公共参数处理
let data: any = {};
const bcancel: boolean = this.handlePublicParams(data);
if (!bcancel) {
return;
}
// 参数处理
let _context = data.context;
let _param = data.param;
Object.assign(_context, { [this.deKeyField]: this.data[this.valueitem] });
const view = JSON.parse(JSON.stringify(this.linkview));
const viewname2: string = this.$util.srfFilePath2(view.viewname);
view.viewname = viewname2;
if (view.isRedirectView) {
this.openRedirectView($event, view, data);
} else if (Object.is(view.placement, 'INDEXVIEWTAB') || Object.is(view.placement, '')) {
this.openIndexViewTab(view, _context, _param);
} else if (Object.is(view.placement, 'POPOVER')) {
this.openPopOver($event, view, _context, _param);
} else if (Object.is(view.placement, 'POPUPMODAL')) {
this.openPopupModal(view, _context, _param);
} else if (view.placement.startsWith('DRAWER')) {
this.openDrawer(view, _context, _param);
}
}
/**
* 打开页面关闭
*
* @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"] });
}
if (this.name) {
this.$emit('formitemvaluechange', { name: this.name, value: item[this.deMajorField]?item[this.deMajorField]:item["srfmajortext"] });
}
}
}
/**
* 公共参数处理
*
* @param {*} arg
* @returns
* @memberof AppPicker
* @memberof AppUpicker
*/
public handlePublicParams(arg: any): boolean {
if (!this.data) {
......@@ -756,85 +355,27 @@ export default class AppPicker extends Vue {
return true;
}
/**
* 触发界面行为
*
* @param {*} arg
* @returns
* @memberof AppPicker
*/
public clickAction(arg:any){
this.$emit('editoractionclick',arg);
}
/**
* 创建并编辑
*
* @param {*} arg
* @returns
* @memberof AppPicker
*/
public newAndEdit($event:any){
if (this.disabled) {
return;
}
// 公共参数处理
let data: any = {};
const bcancel: boolean = this.handlePublicParams(data);
if (!bcancel) {
return;
}
// 参数处理
const view = { ...this.linkview };
view.viewname = this.$util.srfFilePath2(view.viewname);
let _context = data.context;
delete _context[this.deKeyField];
let _param = data.param;
// 判断打开方式
if (view.placement && !Object.is(view.placement, '')) {
if (Object.is(view.placement, 'POPOVER')) {
this.openPopOver($event, view, _context, _param);
} else {
this.openDrawer(view, _context, _param);
}
} else {
this.openPopupModal(view, _context, _param);
}
}
/**
* 输入过程中
*
* @memberof AppAutocomplete
*/
public onInput($event: any) {
if (Object.is($event, this.value)) {
this.inputState = true;
}
}
/**
* 展开下拉
*
* @memberof AppPicker
* @memberof AppUpicker
*/
public openDropdown() {
const appPicker: any = this.$refs.appPicker;
if(appPicker) {
appPicker.focus();
const appUpicker: any = this.$refs.appUpicker;
if(appUpicker) {
appUpicker.focus();
}
}
/**
* 收起下拉
*
* @memberof AppPicker
* @memberof AppUpicker
*/
public closeDropdown() {
const appPicker: any = this.$refs.appPicker;
if(appPicker) {
appPicker.blur();
const appUpicker: any = this.$refs.appUpicker;
if(appUpicker) {
appUpicker.blur();
}
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或