提交 27901264 编写于 作者: RedPig97's avatar RedPig97

update: 多选组件

上级 880419b7
...@@ -142,7 +142,7 @@ import AppTodoList from './components/app-todo-list/app-todo-list.vue'; ...@@ -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 AppGridPagination from './components/app-grid-pagination/app-grid-pagination.vue';
import AppSearchbar from './components/app-searchbar/app-searchbar.vue'; import AppSearchbar from './components/app-searchbar/app-searchbar.vue';
import AppEYUpload from './components/app-ey-upload/app-ey-upload.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 ExtendActionTimeline from './components/extend-action-timeline/extend-action-timeline.vue';
import AppAddressCascader from './components/app-address-cascader/app-address-cascader.vue'; import AppAddressCascader from './components/app-address-cascader/app-address-cascader.vue';
// 布局组件 // 布局组件
...@@ -316,7 +316,7 @@ export const AppComponents = { ...@@ -316,7 +316,7 @@ export const AppComponents = {
v.component('app-grid-pagination',AppGridPagination); v.component('app-grid-pagination',AppGridPagination);
v.component('app-searchbar',AppSearchbar); v.component('app-searchbar',AppSearchbar);
v.component('app-ey-upload',AppEYUpload); 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('extend-action-timeline',ExtendActionTimeline);
v.component('app-pickup-view-layout',AppPickUpViewLayout); v.component('app-pickup-view-layout',AppPickUpViewLayout);
v.component('app-mpickup-view-layout',AppMPickUpViewLayout); v.component('app-mpickup-view-layout',AppMPickUpViewLayout);
......
.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
<template> <template>
<div class="app-ey-mpicker"> <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> </div>
</template> </template>
<script lang = 'ts'> <script lang = 'ts'>
...@@ -9,7 +22,7 @@ import { Subject } from 'rxjs'; ...@@ -9,7 +22,7 @@ import { Subject } from 'rxjs';
@Component({ @Component({
}) })
export default class AppEYMpicker extends Vue { export default class AppEYMPicker extends Vue {
/** /**
* 传入url * 传入url
...@@ -45,7 +58,7 @@ export default class AppEYMpicker extends Vue { ...@@ -45,7 +58,7 @@ export default class AppEYMpicker extends Vue {
* 局部上下文导航参数 * 局部上下文导航参数
* *
* @type {any} * @type {any}
* @memberof AppMpicker * @memberof AppEYMPicker
*/ */
@Prop() public localContext!:any; @Prop() public localContext!:any;
...@@ -53,7 +66,7 @@ export default class AppEYMpicker extends Vue { ...@@ -53,7 +66,7 @@ export default class AppEYMpicker extends Vue {
* 局部导航参数 * 局部导航参数
* *
* @type {any} * @type {any}
* @memberof AppMpicker * @memberof AppEYMPicker
*/ */
@Prop() public localParam!:any; @Prop() public localParam!:any;
...@@ -66,7 +79,7 @@ export default class AppEYMpicker extends Vue { ...@@ -66,7 +79,7 @@ export default class AppEYMpicker extends Vue {
* 视图上下文 * 视图上下文
* *
* @type {*} * @type {*}
* @memberof AppMpicker * @memberof AppEYMPicker
*/ */
@Prop() public context!: any; @Prop() public context!: any;
...@@ -74,7 +87,7 @@ export default class AppEYMpicker extends Vue { ...@@ -74,7 +87,7 @@ export default class AppEYMpicker extends Vue {
* 视图参数 * 视图参数
* *
* @type {*} * @type {*}
* @memberof AppMpicker * @memberof AppEYMPicker
*/ */
@Prop() public viewparams!: any; @Prop() public viewparams!: any;
...@@ -82,7 +95,7 @@ export default class AppEYMpicker extends Vue { ...@@ -82,7 +95,7 @@ export default class AppEYMpicker extends Vue {
* AC参数 * AC参数
* *
* @type {*} * @type {*}
* @memberof AppMpicker * @memberof AppEYMPicker
*/ */
@Prop({default: () => {}}) public acParams?: any; @Prop({default: () => {}}) public acParams?: any;
...@@ -90,7 +103,7 @@ export default class AppEYMpicker extends Vue { ...@@ -90,7 +103,7 @@ export default class AppEYMpicker extends Vue {
* 应用实体主信息属性名称 * 应用实体主信息属性名称
* *
* @type {string} * @type {string}
* @memberof AppMpicker * @memberof AppEYMPicker
*/ */
@Prop({default: 'srfmajortext'}) public deMajorField!: string; @Prop({default: 'srfmajortext'}) public deMajorField!: string;
...@@ -98,7 +111,7 @@ export default class AppEYMpicker extends Vue { ...@@ -98,7 +111,7 @@ export default class AppEYMpicker extends Vue {
* 应用实体主键属性名称 * 应用实体主键属性名称
* *
* @type {string} * @type {string}
* @memberof AppMpicker * @memberof AppEYMPicker
*/ */
@Prop({default: 'srfkey'}) public deKeyField!: string; @Prop({default: 'srfkey'}) public deKeyField!: string;
...@@ -106,7 +119,7 @@ export default class AppEYMpicker extends Vue { ...@@ -106,7 +119,7 @@ export default class AppEYMpicker extends Vue {
* 表单服务 * 表单服务
* *
* @type {*} * @type {*}
* @memberof AppMpicker * @memberof AppEYMPicker
*/ */
@Prop() public service?: any; @Prop() public service?: any;
...@@ -118,7 +131,7 @@ export default class AppEYMpicker extends Vue { ...@@ -118,7 +131,7 @@ export default class AppEYMpicker extends Vue {
/** /**
* 当前表单项绑定值key的集合 * 当前表单项绑定值key的集合
*/ */
public value: any = []; public valueItems: any = [];
/** /**
* 所有操作过的下拉选选项 * 所有操作过的下拉选选项
...@@ -131,6 +144,23 @@ export default class AppEYMpicker extends Vue { ...@@ -131,6 +144,23 @@ export default class AppEYMpicker extends Vue {
*/ */
public selectItems: Array<any> = []; 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值 * 监听curvalue值
* @param newVal * @param newVal
...@@ -138,17 +168,13 @@ export default class AppEYMpicker extends Vue { ...@@ -138,17 +168,13 @@ export default class AppEYMpicker extends Vue {
*/ */
@Watch('curvalue', {immediate:true, deep: true }) @Watch('curvalue', {immediate:true, deep: true })
oncurvalueChange(newVal: any, val: any) { oncurvalueChange(newVal: any, val: any) {
this.value = []; this.valueItems = [];
this.selectItems = []; this.selectItems = [];
if (newVal) { if (newVal) {
try { try {
this.selectItems = this.parseValue(JSON.parse(newVal)); this.selectItems = this.parseValue(JSON.parse(newVal));
this.selectItems.forEach((item: any) => { this.selectItems.forEach((item: any) => {
this.value.push(item[this.deKeyField]); this.valueItems.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] });
}
}); });
} catch (error) { } catch (error) {
if((error as any).name === 'SyntaxError'){ if((error as any).name === 'SyntaxError'){
...@@ -159,12 +185,8 @@ export default class AppEYMpicker extends Vue { ...@@ -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){ if(srfkeys.length && srfkeys.length > 0 && srfmajortexts.length && srfmajortexts.length > 0 && srfkeys.length == srfmajortexts.length){
srfkeys.forEach((id: any, index: number) => { srfkeys.forEach((id: any, index: number) => {
this.value.push(id); this.valueItems.push(id);
this.selectItems.push({[this.deKeyField]: id, [this.deMajorField]: srfmajortexts[index]}); 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 { ...@@ -177,7 +199,7 @@ export default class AppEYMpicker extends Vue {
* 远程执行搜索 * 远程执行搜索
* *
* @param {*} query * @param {*} query
* @memberof AppMpicker * @memberof AppEYMPicker
*/ */
public onSearch(query: any) { public onSearch(query: any) {
// 公共参数处理 // 公共参数处理
...@@ -220,7 +242,7 @@ export default class AppEYMpicker extends Vue { ...@@ -220,7 +242,7 @@ export default class AppEYMpicker extends Vue {
* 下拉选中回调 * 下拉选中回调
* *
* @param {*} selects * @param {*} selects
* @memberof AppMpicker * @memberof AppEYMPicker
*/ */
public onSelect(selects: any) { public onSelect(selects: any) {
let val: Array<any> = []; let val: Array<any> = [];
...@@ -247,7 +269,7 @@ export default class AppEYMpicker extends Vue { ...@@ -247,7 +269,7 @@ export default class AppEYMpicker extends Vue {
* 移除标签回调 * 移除标签回调
* *
* @param {*} tag * @param {*} tag
* @memberof AppMpicker * @memberof AppEYMPicker
*/ */
public onRemove(tag: any) { public onRemove(tag: any) {
let index = this.selectItems.findIndex((item: any) => Object.is(item[this.deKeyField], tag)); let index = this.selectItems.findIndex((item: any) => Object.is(item[this.deKeyField], tag));
...@@ -256,6 +278,7 @@ export default class AppEYMpicker extends Vue { ...@@ -256,6 +278,7 @@ export default class AppEYMpicker extends Vue {
let value = this.selectItems.length > 0 ? JSON.stringify(this.formatValue(this.selectItems)) : ''; let value = this.selectItems.length > 0 ? JSON.stringify(this.formatValue(this.selectItems)) : '';
this.$emit('formitemvaluechange', { name: this.name, value: value }); this.$emit('formitemvaluechange', { name: this.name, value: value });
} }
this.selectCount--;
} }
/** /**
...@@ -263,7 +286,7 @@ export default class AppEYMpicker extends Vue { ...@@ -263,7 +286,7 @@ export default class AppEYMpicker extends Vue {
* *
* @param {*} arg * @param {*} arg
* @returns * @returns
* @memberof AppMpicker * @memberof AppEYMPicker
*/ */
public handlePublicParams(arg: any): boolean { public handlePublicParams(arg: any): boolean {
if (!this.activeData) { if (!this.activeData) {
...@@ -289,9 +312,9 @@ export default class AppEYMpicker extends Vue { ...@@ -289,9 +312,9 @@ export default class AppEYMpicker extends Vue {
* 打开视图 * 打开视图
* *
* @returns * @returns
* @memberof AppMpicker * @memberof AppEYMPicker
*/ */
public openView() { public openView(value: string) {
if (this.disabled) { if (this.disabled) {
return; return;
} }
...@@ -325,14 +348,18 @@ export default class AppEYMpicker extends Vue { ...@@ -325,14 +348,18 @@ export default class AppEYMpicker extends Vue {
if (result.datas && Array.isArray(result.datas)) { if (result.datas && Array.isArray(result.datas)) {
result.datas.forEach((select: any) => { result.datas.forEach((select: any) => {
selects.push({ [this.deKeyField]: select[this.deKeyField], [this.deMajorField]: select[this.deMajorField] }); 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) { 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 }); this.$emit('formitemvaluechange', { name: this.name, value: value });
} }
}) })
...@@ -343,7 +370,7 @@ export default class AppEYMpicker extends Vue { ...@@ -343,7 +370,7 @@ export default class AppEYMpicker extends Vue {
* 解析值,把srfkey和srfmajortext解析成实体属性名 * 解析值,把srfkey和srfmajortext解析成实体属性名
* *
* @param {any[]} value 需要转换的数组 * @param {any[]} value 需要转换的数组
* @memberof AppMpicker * @memberof AppEYMPicker
*/ */
public parseValue(value: any[]){ public parseValue(value: any[]){
let result = []; let result = [];
...@@ -361,7 +388,7 @@ export default class AppEYMpicker extends Vue { ...@@ -361,7 +388,7 @@ export default class AppEYMpicker extends Vue {
* 格式化值,把实体属性名格式化成srfkey和srfmajortext * 格式化值,把实体属性名格式化成srfkey和srfmajortext
* *
* @param {any[]} value 需要转换的数组 * @param {any[]} value 需要转换的数组
* @memberof AppMpicker * @memberof AppEYMPicker
*/ */
public formatValue(value: any[]){ public formatValue(value: any[]){
let result = []; let result = [];
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册