Skip to content

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

update: 多选组件

上级 880419b7
隐藏空白字符变更
内嵌 并排
正在显示 包含 97 行增加 和 37 行删除
src/app-register.ts
浏览文件 @ 27901264
......@@ -142,7 +142,7 @@ import AppTodoList from './components/app-todo-list/app-todo-list.vue';
import AppGridPagination from './components/app-grid-pagination/app-grid-pagination.vue';
import AppSearchbar from './components/app-searchbar/app-searchbar.vue';
import AppEYUpload from './components/app-ey-upload/app-ey-upload.vue';
import AppEYMpicker from './components/app-ey-mpicker/app-ey-mpicker.vue';
import AppEYMPicker from './components/app-ey-mpicker/app-ey-mpicker.vue';
import ExtendActionTimeline from './components/extend-action-timeline/extend-action-timeline.vue';
import AppAddressCascader from './components/app-address-cascader/app-address-cascader.vue';
// 布局组件
......@@ -316,7 +316,7 @@ export const AppComponents = {
v.component('app-grid-pagination',AppGridPagination);
v.component('app-searchbar',AppSearchbar);
v.component('app-ey-upload',AppEYUpload);
v.component('app-ey-mpicker',AppEYMpicker);
v.component('app-ey-mpicker',AppEYMPicker);
v.component('extend-action-timeline',ExtendActionTimeline);
v.component('app-pickup-view-layout',AppPickUpViewLayout);
v.component('app-mpickup-view-layout',AppMPickUpViewLayout);
......
src/components/app-ey-mpicker/app-ey-mpicker.scss
浏览文件 @ 27901264
.app-ey-mpicker {
display: flex;
flex-direction: column;
gap: 10px;
.el-select {
width: 100%;
}
.app-ey-mpicker__item {
width: 100%;
position: relative;
padding-right: 30px;
.app-ey-mpicker__search {
height: 34px;
position: absolute;
top: 0;
right: 40px;
color: var(--ey-color-gray-200);
font-size: 16px;
}
.app-ey-mpicker__button {
height: 34px;
position: absolute;
top: 0;
right: 4px;
display: flex;
align-items: center;
img {
height: 20px;
width: 20px;
}
}
}
}
\ No newline at end of file
src/components/app-ey-mpicker/app-ey-mpicker.vue
浏览文件 @ 27901264
<template>
<div class="app-ey-mpicker">
多选
<div class="app-ey-mpicker__item" v-for="count in selectCount" :key="count">
<el-select :value="getSelectLabel(count-1)" filterable remote :remote-method="onSearch" size="small" @change="onSelect" :disabled="disabled">
<template v-if="!valueItems[count-1]">
<el-option v-for="(item, index) in items" :key="index" :label="item[deMajorField]" :value="item[deKeyField]"></el-option>
</template>
</el-select>
<span class="app-ey-mpicker__search">
<i class="el-icon-search" @click="openView(valueItems[count-1])"></i>
</span>
<div class="app-ey-mpicker__button">
<img v-if="count === selectCount" src="assets/img/ic_add_circle.svg" @click="selectCount++">
<img v-else src="assets/img/remove_circle.svg" @click="onRemove(valueItems[count-1])">
</div>
</div>
</div>
</template>
<script lang = 'ts'>
......@@ -9,7 +22,7 @@ import { Subject } from 'rxjs';
@Component({
})
export default class AppEYMpicker extends Vue {
export default class AppEYMPicker extends Vue {
/**
* 传入url
......@@ -45,7 +58,7 @@ export default class AppEYMpicker extends Vue {
* 局部上下文导航参数
*
* @type {any}
* @memberof AppMpicker
* @memberof AppEYMPicker
*/
@Prop() public localContext!:any;
......@@ -53,7 +66,7 @@ export default class AppEYMpicker extends Vue {
* 局部导航参数
*
* @type {any}
* @memberof AppMpicker
* @memberof AppEYMPicker
*/
@Prop() public localParam!:any;
......@@ -66,7 +79,7 @@ export default class AppEYMpicker extends Vue {
* 视图上下文
*
* @type {*}
* @memberof AppMpicker
* @memberof AppEYMPicker
*/
@Prop() public context!: any;
......@@ -74,7 +87,7 @@ export default class AppEYMpicker extends Vue {
* 视图参数
*
* @type {*}
* @memberof AppMpicker
* @memberof AppEYMPicker
*/
@Prop() public viewparams!: any;
......@@ -82,7 +95,7 @@ export default class AppEYMpicker extends Vue {
* AC参数
*
* @type {*}
* @memberof AppMpicker
* @memberof AppEYMPicker
*/
@Prop({default: () => {}}) public acParams?: any;
......@@ -90,7 +103,7 @@ export default class AppEYMpicker extends Vue {
* 应用实体主信息属性名称
*
* @type {string}
* @memberof AppMpicker
* @memberof AppEYMPicker
*/
@Prop({default: 'srfmajortext'}) public deMajorField!: string;
......@@ -98,7 +111,7 @@ export default class AppEYMpicker extends Vue {
* 应用实体主键属性名称
*
* @type {string}
* @memberof AppMpicker
* @memberof AppEYMPicker
*/
@Prop({default: 'srfkey'}) public deKeyField!: string;
......@@ -106,7 +119,7 @@ export default class AppEYMpicker extends Vue {
* 表单服务
*
* @type {*}
* @memberof AppMpicker
* @memberof AppEYMPicker
*/
@Prop() public service?: any;
......@@ -118,7 +131,7 @@ export default class AppEYMpicker extends Vue {
/**
* 当前表单项绑定值key的集合
*/
public value: any = [];
public valueItems: any = [];
/**
* 所有操作过的下拉选选项
......@@ -131,6 +144,23 @@ export default class AppEYMpicker extends Vue {
*/
public selectItems: Array<any> = [];
/**
* 选项框数量
*
*/
public selectCount: number = 1;
/**
* 获取选中label
*
*/
public getSelectLabel(index: number) {
const selection = this.selectItems[index];
if (selection) {
return selection[this.deMajorField];
}
}
/**
* 监听curvalue值
* @param newVal
......@@ -138,17 +168,13 @@ export default class AppEYMpicker extends Vue {
*/
@Watch('curvalue', {immediate:true, deep: true })
oncurvalueChange(newVal: any, val: any) {
this.value = [];
this.valueItems = [];
this.selectItems = [];
if (newVal) {
try {
this.selectItems = this.parseValue(JSON.parse(newVal));
this.selectItems.forEach((item: any) => {
this.value.push(item[this.deKeyField]);
let index = this.items.findIndex((i) => Object.is(i[this.deKeyField], item[this.deKeyField]));
if (index < 0) {
this.items.push({ [this.deMajorField]: item[this.deMajorField], [this.deKeyField]: item[this.deKeyField] });
}
this.valueItems.push(item[this.deKeyField]);
});
} catch (error) {
if((error as any).name === 'SyntaxError'){
......@@ -159,12 +185,8 @@ export default class AppEYMpicker extends Vue {
}
if(srfkeys.length && srfkeys.length > 0 && srfmajortexts.length && srfmajortexts.length > 0 && srfkeys.length == srfmajortexts.length){
srfkeys.forEach((id: any, index: number) => {
this.value.push(id);
this.valueItems.push(id);
this.selectItems.push({[this.deKeyField]: id, [this.deMajorField]: srfmajortexts[index]});
let _index = this.items.findIndex((i) => Object.is(i[this.deKeyField],id));
if (_index < 0) {
this.items.push({[this.deKeyField]: id, [this.deMajorField]: srfmajortexts[index]});
}
});
}
}
......@@ -177,7 +199,7 @@ export default class AppEYMpicker extends Vue {
* 远程执行搜索
*
* @param {*} query
* @memberof AppMpicker
* @memberof AppEYMPicker
*/
public onSearch(query: any) {
// 公共参数处理
......@@ -220,7 +242,7 @@ export default class AppEYMpicker extends Vue {
* 下拉选中回调
*
* @param {*} selects
* @memberof AppMpicker
* @memberof AppEYMPicker
*/
public onSelect(selects: any) {
let val: Array<any> = [];
......@@ -247,7 +269,7 @@ export default class AppEYMpicker extends Vue {
* 移除标签回调
*
* @param {*} tag
* @memberof AppMpicker
* @memberof AppEYMPicker
*/
public onRemove(tag: any) {
let index = this.selectItems.findIndex((item: any) => Object.is(item[this.deKeyField], tag));
......@@ -256,6 +278,7 @@ export default class AppEYMpicker extends Vue {
let value = this.selectItems.length > 0 ? JSON.stringify(this.formatValue(this.selectItems)) : '';
this.$emit('formitemvaluechange', { name: this.name, value: value });
}
this.selectCount--;
}
/**
......@@ -263,7 +286,7 @@ export default class AppEYMpicker extends Vue {
*
* @param {*} arg
* @returns
* @memberof AppMpicker
* @memberof AppEYMPicker
*/
public handlePublicParams(arg: any): boolean {
if (!this.activeData) {
......@@ -289,9 +312,9 @@ export default class AppEYMpicker extends Vue {
* 打开视图
*
* @returns
* @memberof AppMpicker
* @memberof AppEYMPicker
*/
public openView() {
public openView(value: string) {
if (this.disabled) {
return;
}
......@@ -325,14 +348,18 @@ export default class AppEYMpicker extends Vue {
if (result.datas && Array.isArray(result.datas)) {
result.datas.forEach((select: any) => {
selects.push({ [this.deKeyField]: select[this.deKeyField], [this.deMajorField]: select[this.deMajorField] });
let index = this.items.findIndex((item) => Object.is(item[this.deKeyField], select[this.deKeyField]));
if (index < 0) {
this.items.push({ [this.deMajorField]: select[this.deMajorField], [this.deKeyField]: select[this.deKeyField] });
}
});
}
if (value) {
const index = this.selectItems.findIndex((item: any) => Object.is(item[this.deKeyField], value));
if (index != -1) {
this.selectItems.splice(index, 1, ...selects);
}
} else {
this.selectItems.push(...selects);
}
if (this.name && this.activeData) {
let value = selects.length > 0 ? JSON.stringify(this.formatValue(selects)) : '';
let value = this.selectItems.length > 0 ? JSON.stringify(this.formatValue(this.selectItems)) : '';
this.$emit('formitemvaluechange', { name: this.name, value: value });
}
})
......@@ -343,7 +370,7 @@ export default class AppEYMpicker extends Vue {
* 解析值,把srfkey和srfmajortext解析成实体属性名
*
* @param {any[]} value 需要转换的数组
* @memberof AppMpicker
* @memberof AppEYMPicker
*/
public parseValue(value: any[]){
let result = [];
......@@ -361,7 +388,7 @@ export default class AppEYMpicker extends Vue {
* 格式化值，把实体属性名格式化成srfkey和srfmajortext
*
* @param {any[]} value 需要转换的数组
* @memberof AppMpicker
* @memberof AppEYMPicker
*/
public formatValue(value: any[]){
let result = [];
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或