Skip to content

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

修改数据选择编辑器（请求数据）

上级 60d36c5e
显示空白字符变更
内嵌 并排
正在显示 包含 733 行增加 和 97 行删除
src/components/app-upicker/app-upicker.less
浏览文件 @ 1296000b
.app-picker { .app-upicker {
width: 100%; width: 100%;
.el-select { .el-select {
.el-input__suffix { .el-input__suffix {
right: 20px; display: none;
} }
} }
.text-value { .text-value {
......
src/components/app-upicker/app-upicker.vue
浏览文件 @ 1296000b
<template> <template>
<el-select style="width: 100%;" size='small' @change="onSelect" v-model="value" :disabled="disabled" @visible-change="onSelectOpen"> <div v-if="Object.is(editortype, 'dropdown')" class='app-upicker'>
<el-option v-for="(item, index) in items" :key="index" :label="item.label" :value="item.value"></el-option> <el-select ref="appPicker" :value="refvalue" size='small' filterable
@change="onSelect" :disabled="disabled" style='width:100%;' clearable
@clear="onClear" @visible-change="onSelectOpen">
<template v-if="items">
<el-option v-for="(_item,index) in items" :key="index" :value="_item.value" :label="_item.label"></el-option>
</template>
</el-select> </el-select>
<span style='position: absolute;right: 5px;color: #c0c4cc;top:0;font-size: 13px;'>
<i v-show="open" class='el-icon-arrow-up' @click="closeDropdown"></i>
<i v-show="!open" class='el-icon-arrow-down' @click="openDropdown"></i>
</span>
</div>
</template> </template>
<script lang="ts"> <script lang = 'ts'>
import { Component, Vue, Prop, Model, Watch } from "vue-property-decorator"; import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator';
import { Subject } from "rxjs"; import { Subject } from 'rxjs';
import { AppModal } from "@/utils"; import { AppModal } from '@/utils';
@Component({}) @Component({
})
export default class AppPicker extends Vue { export default class AppPicker extends Vue {
/**
* 请求到的数据
* @type {any[]}
* @memberof AppPicker
*/
public itemList: any[] = []
/**
* 列表项请求路径
*
* @type {string}
* @memberof AppUpicker
*/
public url: string = '';
/**
* 请求参数和请求数据的映射关系
*
* @type {*}
* @memberof AppUpicker
*/
public interaction:any = {};
/**
* 编辑器参数
*
* @type {*}
* @memberof AppUpicker
*/
@Prop() public itemParams?: any;
/**
* 视图上下文
*
* @type {*}
* @memberof AppFormDRUIPart
*/
@Prop() public context!: any;
/**
* 视图参数
*
* @type {*}
* @memberof AppFormDRUIPart
*/
@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;
/** /**
* 表单数据 * 表单数据
* *
...@@ -29,68 +119,101 @@ export default class AppPicker extends Vue { ...@@ -29,68 +119,101 @@ export default class AppPicker extends Vue {
@Prop() public name!: string; @Prop() public name!: string;
/** /**
* 视图上下文 * 是否启用
* *
* @type {*} * @type {boolean}
* @memberof AppFormDRUIPart * @memberof AppPicker
*/ */
@Prop() public context!: any; @Prop() public disabled?: boolean;
/** /**
* 编辑器禁用 * 是否显示按钮
* *
* @type {boolean} * @type {boolean}
* @memberof AppUpicker * @memberof AppPicker
*/ */
@Prop() disabled?: boolean; @Prop({default:true}) public showButton?: boolean;
/** /**
* 视图参数 * 类型
*
* @type {string}
* @memberof AppPicker
*/
@Prop() public editortype?: string;
/**
* 视图参数（如：视图name，title，width，height）
* *
* @type {*} * @type {*}
* @memberof SelectFormBase * @memberof AppPicker
*/ */
@Prop() public viewparams: any; @Prop() public pickupView?: any;
/** /**
* 请求参数和请求数据的映射关系 * 数据链接参数
* *
* @type {*} * @type {*}
* @memberof AppUpicker * @memberof AppPicker
*/ */
public interaction:any = {}; @Prop() public linkview?: any;
/** /**
* 当前表单项绑定的值 * 局部上下文导航参数
* *
* @type {string} * @type {any}
* @memberof AppUpicker * @memberof AppPicker
*/ */
public value: string = ""; @Prop() public localContext!:any;
/** /**
* 编辑器参数 * 局部导航参数
* *
* @type {*} * @type {any}
* @memberof AppUpicker * @memberof AppPicker
*/ */
@Prop() public itemParams?: any; @Prop() public localParam!:any;
/** /**
* 编辑器参数 * 值项名称
* *
* @type {string} * @type {string}
* @memberof AppUpicker * @memberof AppPicker
*/ */
@Prop() public valueItem?: string; @Prop() public valueitem!: string;
/** /**
* 列表项请求路径 * 排序
* *
* @type {string} * @type {string}
* @memberof AppUpicker * @memberof AppPicker
*/ */
public url: string = ''; @Prop() public sort?: string;
/**
* 行为组
*
* @type {Array<any>}
* @memberof AppPicker
*/
@Prop() public actionDetails?:Array<any>;
/**
* 值
*
* @type {*}
* @memberof AppPicker
*/
@Model('change') public value?: any;
/**
* 当前值
*
* @type {string}
* @memberof AppPicker
*/
public curvalue: string = '';
/** /**
* 下拉数组 * 下拉数组
...@@ -100,11 +223,75 @@ export default class AppPicker extends Vue { ...@@ -100,11 +223,75 @@ export default class AppPicker extends Vue {
public items: any[] = []; public items: any[] = [];
/** /**
* 请求到的数据 * 下拉图标指向状态管理
* @type {any[]} * @type {boolean}
* @memberof AppPicker * @memberof AppPicker
*/ */
public itemList: any[] = [{a:1,b:"zhangsan"},{a:2,b:"lisi"},{a:3,b:"wangwu"}] public open: boolean = false;
/**
* 输入状态
*
* @type {boolean}
* @memberof AppAutocomplete
*/
public inputState: boolean = false;
/**
* 当前选择的值
*
* @type {string}
* @memberof AppPicker
*/
public selectValue = this.value;
/**
* 获取关联数据项值
*
* @readonly
* @memberof AppPicker
*/
get refvalue() {
if (this.valueitem && this.data) {
return this.data[this.valueitem];
}
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.fectchItemList(this.url);
}
}
/**
* vue 生命周期
*
* @memberof AppPicker
*/
public created() {
if(!Object.is(this.editortype, 'pickup-no-ac') && !Object.is(this.editortype, 'dropdown')){
this.curvalue = this.value;
}
}
/** /**
* vue 生命周期 * vue 生命周期
...@@ -119,12 +306,11 @@ export default class AppPicker extends Vue { ...@@ -119,12 +306,11 @@ export default class AppPicker extends Vue {
} }
/** /**
* 下拉重新加载数据 * 组件销毁
* *
* @memberof AppPicker * @memberof AppPicker
*/ */
public onSelectOpen() { public destroyed(): void {
this.fectchItemList(this.url);
} }
/** /**
...@@ -184,10 +370,72 @@ export default class AppPicker extends Vue { ...@@ -184,10 +370,72 @@ export default class AppPicker extends Vue {
}); });
} }
public onSelect(val: string) { /**
let index = this.items.findIndex((item) => Object.is(item.value, val)); * 下拉切换回调
if (index >= 0) { * @param flag
this.onACSelect(this.items[index]); */
public onSelectOpen(flag: boolean): void {
this.open = flag;
if (this.open) {
this.fectchItemList(this.url);
}
}
/**
* 执行搜索数据
* @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([]);
}
});
} }
} }
...@@ -196,13 +444,401 @@ export default class AppPicker extends Vue { ...@@ -196,13 +444,401 @@ export default class AppPicker extends Vue {
* @param item * @param item
*/ */
public onACSelect(item: any): void { public onACSelect(item: any): void {
if(this.name){ 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 }); this.$emit('formitemvaluechange', { name: this.name, value: item.value });
} }
if(this.valueItem){
this.$emit('formitemvaluechange', { name: this.valueItem, value: item.value });
} }
/**
* 下拉选中
*
* @param {string} val
* @memberof AppPicker
*/
public onSelect(val: string) {
let index = this.items.findIndex((item) => Object.is(item.value, val));
if (index >= 0) {
this.onACSelect(this.items[index]);
}
}
/**
* 失去焦点事件
* @param e
*/
public onBlur(e: any): void {
this.curvalue = this.value;
}
/**
* 清除
*/
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();
}
/**
* 打开视图
*/
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
*/
public handlePublicParams(arg: any): boolean {
if (!this.data) {
this.$Notice.error({ title: (this.$t('components.appPicker.error') as any), desc: (this.$t('components.appPicker.formdataException') as any) });
return false;
}
// 合并表单参数
arg.param = this.viewparams ? JSON.parse(JSON.stringify(this.viewparams)) : {};
arg.context = this.context ? JSON.parse(JSON.stringify(this.context)) : {};
// 附加参数处理
if (this.localContext && Object.keys(this.localContext).length >0) {
let _context = this.$util.computedNavData(this.data,arg.context,arg.param,this.localContext);
Object.assign(arg.context,_context);
}
if (this.localParam && Object.keys(this.localParam).length >0) {
let _param = this.$util.computedNavData(this.data,arg.param,arg.param,this.localParam);
Object.assign(arg.param,_param);
}
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
*/
public openDropdown() {
const appPicker: any = this.$refs.appPicker;
if(appPicker) {
appPicker.focus();
}
}
/**
* 收起下拉
*
* @memberof AppPicker
*/
public closeDropdown() {
const appPicker: any = this.$refs.appPicker;
if(appPicker) {
appPicker.blur();
}
}
} }
</script> </script>
<style lang="less"> <style lang="less">
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或