提交 15078225 编写于 作者: Neuromancer255's avatar Neuromancer255

添加数据选择(请求数据)编辑器

上级 6075fdb1
...@@ -39,6 +39,7 @@ import AppFormGroup from './components/app-form-group/app-form-group.vue' ...@@ -39,6 +39,7 @@ import AppFormGroup from './components/app-form-group/app-form-group.vue'
import AppFormItem from './components/app-form-item/app-form-item.vue' import AppFormItem from './components/app-form-item/app-form-item.vue'
import AppPicker from './components/app-picker/app-picker.vue' import AppPicker from './components/app-picker/app-picker.vue'
import AppMpicker from './components/app-mpicker/app-mpicker.vue' import AppMpicker from './components/app-mpicker/app-mpicker.vue'
import AppUpicker from './components/app-upicker/app-upicker.vue'
import AppFormGroup2 from './components/app-form-group2/app-form-group2.vue' import AppFormGroup2 from './components/app-form-group2/app-form-group2.vue'
import AppFormItem2 from './components/app-form-item2/app-form-item2.vue' import AppFormItem2 from './components/app-form-item2/app-form-item2.vue'
import CodeList from './components/codelist/codelist.vue' import CodeList from './components/codelist/codelist.vue'
...@@ -130,6 +131,7 @@ export const AppComponents = { ...@@ -130,6 +131,7 @@ export const AppComponents = {
v.component('app-form-item',AppFormItem); v.component('app-form-item',AppFormItem);
v.component('app-picker', AppPicker); v.component('app-picker', AppPicker);
v.component('app-mpicker', AppMpicker); v.component('app-mpicker', AppMpicker);
v.component('app-upicker', AppUpicker);
v.component('app-form-group2', AppFormGroup2); v.component('app-form-group2', AppFormGroup2);
v.component('app-form-item2', AppFormItem2); v.component('app-form-item2', AppFormItem2);
v.component('codelist', CodeList); v.component('codelist', CodeList);
......
<template>
<div style="position: relative;width: 100%;">
<el-select @change="onSelect" v-model="value" :disabled="disabled">
<el-option v-for="(item, index) in items" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Model, Watch } from "vue-property-decorator";
import { Subject } from "rxjs";
import { AppModal } from "@/utils";
@Component({})
export default class AppPicker extends Vue {
/**
* 表单数据
*
* @type {*}
* @memberof AppPicker
*/
@Prop() public data!: any;
/**
* 属性项名称
*
* @type {string}
* @memberof AppPicker
*/
@Prop() public name!: string;
/**
* 视图上下文
*
* @type {*}
* @memberof AppFormDRUIPart
*/
@Prop() public context!: any;
/**
* 编辑器禁用
*
* @type {boolean}
* @memberof AppUpicker
*/
@Prop() disabled?: boolean;
/**
* 视图参数
*
* @type {*}
* @memberof SelectFormBase
*/
@Prop() public viewparams: any;
/**
* 请求参数和请求数据的映射关系
*
* @type {*}
* @memberof AppUpicker
*/
public interaction:any = {};
/**
* 当前表单项绑定的值
*
* @type {string}
* @memberof AppUpicker
*/
public value: string = "";
/**
* 编辑器参数
*
* @type {*}
* @memberof AppUpicker
*/
@Prop() public itemParams?: any;
/**
* 列表项请求路径
*
* @type {string}
* @memberof AppUpicker
*/
public url: string = '';
/**
* 下拉数组
* @type {any[]}
* @memberof AppPicker
*/
public items: any[] = [];
/**
* 请求到的数据
* @type {any[]}
* @memberof AppPicker
*/
public itemList: any[] = [{a:1,b:"zhangsan"},{a:2,b:"lisi"},{a:3,b:"wangwu"}]
/**
* vue 生命周期
*
* @memberof AppPicker
*/
public mounted() {
// 解析编辑器参数
this.analysis(this.itemParams);
// 请求下拉数据
// this.fectchItemList(this.url);
// 提取需要的值(value,label)
this.extractItem(this.itemList,this.items);
}
/**
* 解析编辑器参数
* @param {*} itemparams
* @memberof AppPicker
*/
public analysis(itemparams:any) {
Object.keys(itemparams).forEach((param)=>{
if(param==='path'){
this.url = itemparams[param]
}else{
this.interaction[param] = itemparams[param]
}
})
}
/**
* 请求下拉列表数据
* @param {string} url
* @memberof AppPicker
*/
public fectchItemList(url:string) {
this.$http
.get(url)
.then((response: any) => {
this.itemList = response.data;
})
.catch((response: any) => {
if (!response || !response.status || !response.data) {
this.$Notice.error({
title: this.$t("app.commonWords.error") as string,
desc: this.$t("app.commonWords.sysException") as string,
});
return;
}
});
}
/**
* 解析下拉列表数据
* @param {any[]} itemList 请求到的数据
* @param {any[]} items 下拉数组
* @memberof AppPicker
*/
public extractItem(itemList:any[],items:any[]) {
itemList.forEach((item) => {
items.push({
label: item[this.interaction.label],
value: item[this.interaction.value],
});
});
}
public onSelect(val: string) {
let index = this.items.findIndex((item) => Object.is(item.value, val));
if (index >= 0) {
this.onACSelect(this.items[index]);
}
}
/**
* 选中数据回调
* @param item
*/
public onACSelect(item: any): void {
this.$emit('formitemvaluechange', { name: this.name, value: item.label });
}
}
</script>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册