app-ey-mpicker.vue

<template>
    <div class="app-ey-mpicker">
        <div class="app-ey-mpicker__item" v-for="count in selectCount" :key="count">
            <el-select
                :value="valueItems[count - 1]"
                filterable
                remote
                :remote-method="onSearch"
                size="small"
                @change="onSelect($event, valueItems[count - 1])"
                @clear="onRemove(valueItems[count - 1], true)"
                @visible-change="onSelectOpen($event, count - 1)"
                :clearable="selectCount == 1"
                :disabled="disabled"
            >
                <el-option v-for="(item, index) in items" :key="index" :label="item[deMajorField]" :value="item[deKeyField]"></el-option>
            </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">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { Subject } from "rxjs";

@Component({})
export default class AppEYMPicker extends Vue {
    /**
     * 传入url
     */
    @Prop() url?: any;

    /**
     * 表单数据
     */
    @Prop() activeData?: any;

    /**
     * 是否禁用
     */
    @Prop() disabled?: boolean;

    /**
     * 编辑器参数
     */
    @Prop() editorParams?: any;

    /**
     * 表单项值
     */
    @Prop() curvalue?: any;

    /**
     * 值项
     */
    @Prop() valueitem?: any;

    /**
     * 局部上下文导航参数
     *
     * @type {any}
     * @memberof AppEYMPicker
     */
    @Prop() public localContext!: any;

    /**
     * 局部导航参数
     *
     * @type {any}
     * @memberof AppEYMPicker
     */
    @Prop() public localParam!: any;

    /**
     * 表单项名称
     */
    @Prop() name: any;

    /**
     * 视图上下文
     *
     * @type {*}
     * @memberof AppEYMPicker
     */
    @Prop() public context!: any;

    /**
     * 视图参数
     *
     * @type {*}
     * @memberof AppEYMPicker
     */
    @Prop() public viewparams!: any;

    /**
     * AC参数
     *
     * @type {*}
     * @memberof AppEYMPicker
     */
    @Prop({ default: () => {} }) public acParams?: any;

    /**
     * 应用实体主信息属性名称
     *
     * @type {string}
     * @memberof AppEYMPicker
     */
    @Prop({ default: "srfmajortext" }) public deMajorField!: string;

    /**
     * 应用实体主键属性名称
     *
     * @type {string}
     * @memberof AppEYMPicker
     */
    @Prop({ default: "srfkey" }) public deKeyField!: string;

    /**
     * 表单服务
     *
     * @type {*}
     * @memberof AppEYMPicker
     */
    @Prop() public service?: any;

    /**
     * 打开对应的选择视图
     */
    @Prop() pickupView?: any;

    /**
     * 当前表单项绑定值key的集合
     */
    public valueItems: any = [];

    /**
     * 所有操作过的下拉选选项
     */
    public items: Array<any> = [];

    /**
     * 选中项key-value键值对
     *
     */
    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
     * @param val
     */
    @Watch("curvalue", { immediate: true, deep: true })
    oncurvalueChange(newVal: any, val: any) {
        this.valueItems = [];
        this.selectItems = [];
        if (newVal) {
            try {
                this.selectItems = this.parseValue(JSON.parse(newVal));
                this.selectItems.forEach((item: any) => {
                    this.valueItems.push(item[this.deKeyField]);
                });
            } catch (error) {
                if ((error as any).name === "SyntaxError") {
                    let srfkeys: any = newVal.split(",");
                    let srfmajortexts: any = null;
                    if (this.valueitem && this.activeData[this.valueitem]) {
                        srfmajortexts = this.activeData[this.valueitem].split(",");
                    }
                    if (srfkeys.length && srfkeys.length > 0 && srfmajortexts.length && srfmajortexts.length > 0 && srfkeys.length == srfmajortexts.length) {
                        srfkeys.forEach((id: any, index: number) => {
                            this.valueItems.push(id);
                            this.selectItems.push({ [this.deKeyField]: id, [this.deMajorField]: srfmajortexts[index] });
                        });
                    }
                }
            }
        }
        this.$forceUpdate();
    }

    /**
     * 下拉切换回调
     * @param boolean
     */
    public onSelectOpen(visible: boolean, index: number): void {
        if (visible) {
            const label = this.getSelectLabel(index);
            if (this.items.length == 0 || !label) {
                this.onSearch(label);
            }
        }
    }

    /**
     * 远程执行搜索
     *
     * @param {*} query
     * @memberof AppEYMPicker
     */
    public onSearch(query: any) {
        // 公共参数处理
        let data: any = {};
        const bcancel: boolean = this.handlePublicParams(data);
        if (!bcancel) {
            return;
        }
        // 参数处理
        let _context = data.context;
        let _param = data.param;
        Object.assign(_param, { query: query });
        if (this.activeData) {
            Object.assign(_param, { srfreferdata: this.activeData });
        }
        // 错误信息国际化
        let error: string = this.$t("components.appMpicker.error") as any;
        let miss: string = this.$t("components.appMpicker.miss") as any;
        let requestException: string = this.$t("components.appMpicker.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];
                    }
                })
                .catch((error: any) => {
                    console.log(error);
                });
        }
    }

    /**
     * 下拉选中回调
     *
     * @param {*} value
     * @memberof AppEYMPicker
     */
    public onSelect(value: string, valueItem: string) {
        const item = this.items.find((item) => Object.is(item[this.deKeyField], value));
        if (item) {
            this.computeItemSelect([item], valueItem);
        }
    }

    /**
     * 移除标签回调
     *
     * @param {*} tag
     * @memberof AppEYMPicker
     */
    public onRemove(value: string, isClear: boolean = false) {
        let index = this.selectItems.findIndex((item: any) => Object.is(item[this.deKeyField], value));
        if (index >= 0) {
            this.selectItems.splice(index, 1);
            let value = this.selectItems.length > 0 ? JSON.stringify(this.formatValue(this.selectItems)) : "";
            this.$emit("formitemvaluechange", { name: this.name, value: value });
        }
        if (!isClear) {
            this.selectCount--;
        }
    }

    /**
     * 移除标签回调
     *
     * @param {*} items
     * @memberof AppEYMPicker
     */
    public computeItemSelect(items: any[], value: string) {
        if (value) {
            const index = this.selectItems.findIndex((item: any) => Object.is(item[this.deKeyField], value));
            if (index != -1) {
                this.selectItems.splice(index, 1, ...items);
            }
        } else {
            this.selectItems.push(...items);
        }
        if (this.name && this.activeData) {
            let value = this.selectItems.length > 0 ? JSON.stringify(this.formatValue(this.selectItems)) : "";
            this.$emit("formitemvaluechange", { name: this.name, value: value });
        }
    }

    /**
     * 公共参数处理
     *
     * @param {*} arg
     * @returns
     * @memberof AppEYMPicker
     */
    public handlePublicParams(arg: any): boolean {
        if (!this.activeData) {
            this.$Notice.error({ title: this.$t("components.AppMpicker.error") as any, desc: this.$t("components.AppMpicker.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.activeData, 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.activeData, arg.param, arg.param, this.localParam);
            Object.assign(arg.param, _param);
        }
        return true;
    }

    /**
     * 打开视图
     *
     * @returns
     * @memberof AppEYMPicker
     */
    public openView(value: string) {
        if (this.disabled) {
            return;
        }
        if (this.pickupView && Object.keys(this.pickupView).length > 0) {
            // 参数处理
            const view = { ...this.pickupView };
            // 公共参数处理
            let data: any = {};
            const bcancel: boolean = this.handlePublicParams(data);
            if (!bcancel) {
                return;
            }
            // 参数处理
            let _context = data.context;
            let _viewparams = data.param;
            let _selectItems = JSON.parse(JSON.stringify(this.selectItems));
            if (!Object.is(this.deKeyField, "srfkey")) {
                _selectItems.forEach((item: any, index: number) => {
                    _selectItems[index].srfkey = item[this.deKeyField];
                });
            }
            _context = Object.assign(_context, { srfparentdata: { srfparentkey: this.activeData[this.deKeyField] } });
            _viewparams = Object.assign(_viewparams, { selectedData: [..._selectItems] });
            let formdata = this.activeData;
            const modal: Subject<any> = this.$appmodal.openModal(view, _context, _viewparams);
            modal.subscribe((result: any) => {
                if (!result || !Object.is(result.ret, "OK")) {
                    return;
                }
                let selects: Array<any> = [];
                if (result.datas && Array.isArray(result.datas)) {
                    result.datas.forEach((select: any) => {
                        selects.push({ [this.deKeyField]: select[this.deKeyField], [this.deMajorField]: select[this.deMajorField] });
                    });
                }
                this.computeItemSelect(selects, value);
            });
        }
    }

    /**
     * 解析值,把srfkey和srfmajortext解析成实体属性名
     *
     * @param {any[]} value 需要转换的数组
     * @memberof AppEYMPicker
     */
    public parseValue(value: any[]) {
        let result = [];
        if (this.deKeyField !== "srfkey" || this.deMajorField !== "srfmajortext") {
            value.forEach((item: any) => {
                result.push({ [this.deMajorField]: item.srfmajortext, [this.deKeyField]: item.srfkey });
            });
        } else {
            result = value;
        }
        return result;
    }

    /**
     * 格式化值，把实体属性名格式化成srfkey和srfmajortext
     *
     * @param {any[]} value 需要转换的数组
     * @memberof AppEYMPicker
     */
    public formatValue(value: any[]) {
        let result = [];
        if (this.deKeyField !== "srfkey" || this.deMajorField !== "srfmajortext") {
            value.forEach((item: any) => {
                result.push({ srfmajortext: item[this.deMajorField], srfkey: item[this.deKeyField] });
            });
        } else {
            result = value;
        }
        const res = new Map();
        return result.filter((item: any) => !res.has(item.srfmajortext) && res.set(item.srfmajortext, item.srfkey));
    }
}
</script>
<style lang="scss">
@import "./app-ey-mpicker.scss";
</style>