修复数值框firstElementChild异常 更新

src/components/ibiz-group-picker/ibiz-group-picker.vue

+<template>
+    <div class="ibiz-group-picker">
+        <div class="ibiz-group-container">
+            <div v-if="showTree" class="ibiz-group-tree">
+                <ibiz-select-tree :NodesData="treeItems" v-model="treeSelectVal" :treeOnly="true" :defaultChecked="true" @select="treeSelect"></ibiz-select-tree>
+            </div>
+            <div class="ibiz-group-content">
+                <ibiz-group-card :data="cardItems" text="label" value="id" groupName="group" :multiple="multiple" :defaultSelect="cardSelctVal" @select="groupSelect"></ibiz-group-card>
+            </div>
+        </div>
+        <div class="ibiz-group-footer">
+            <el-button size="small" type="primary" @click="onOK">{{$t('components.iBizGroupPicker.ok')}}</el-button>
+            <el-button size="small" @click="onCancel">{{$t('components.iBizGroupPicker.cancel')}}</el-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
+import { Subject } from 'rxjs';
+import { Http } from '../../utils';
+
+@Component({})
+export default class IBizGroupPicker extends Vue {
+
+    /**
+     * 视图上下文参数
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    @Prop() viewdata: any;
+
+    /**
+     * 视图参数
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    @Prop() viewparam: any;
+
+    /**
+     * 多选
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected multiple: boolean = false;
+
+    /**
+     * 加载树url
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected treeurl:any;
+
+    /**
+     * 加载人员url
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected url:any;
+
+    /**
+     * 树数据集
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected treeItems: any[] = [];
+
+    /**
+     * 分组表数据集
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected cardItems: any[] = [];
+
+    /**
+     * 视图上下文参数对象
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected viewData: any;
+
+    /**
+     * 视图参数对象
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected viewParam: any;
+
+    /**
+     * 树选中值
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected treeSelectVal: string = '';
+
+    /**
+     * 分组表选中集合
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected cardSelctVal: any = [];
+
+    /**
+     * 数据选中集合
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    protected selects: any[] = [];
+
+    /**
+     * 是否显示树
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    get showTree() {
+        if(this.viewParam) {
+            return this.viewParam.showtree;
+        }
+    }
+
+    /**
+     * 生命周期
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    public created() {
+        if(!this.viewdata || !this.viewparam) {
+            return;
+        }
+        this.viewData = JSON.parse(this.viewdata);
+        this.viewParam = JSON.parse(this.viewparam);
+        this.multiple = this.viewParam.multiple;
+        this.treeurl = this.viewParam.treeurl;
+        this.url = this.viewParam.url;
+        if (this.viewParam.selects) {
+            this.viewParam.selects.forEach((select: any) => {
+                this.selects.push(select);
+                this.cardSelctVal.push(select.id)
+            })
+        }
+        this.load();
+    }
+
+    /**
+     * 加载数据
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    public load() {
+        if(this.showTree) {
+            this.loadTree();
+        } else {
+            this.loadGroupData(this.viewParam.filtervalue);
+        }
+    }
+
+    /**
+     * 加载树数据
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    public loadTree() {
+        let orgid = this.viewParam.filtervalue;
+        let tempTreeUrl:string = this.treeurl.replace('${orgid}',orgid);
+        let get = Http.getInstance().get(tempTreeUrl, true);
+        get.then((response: any) => {
+            if(response.status === 200) {
+                this.treeItems = response.data;
+            }
+        }).catch((error: any) => {
+            console.log(error)
+        })
+    }
+
+    /**
+     * 加载分组表数据
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    public loadGroupData(key: string) {
+        let tempUrl = this.url.replace('${selected-orgid}',key);
+        let get = Http.getInstance().get(tempUrl, true);
+        get.then((response: any) => {
+            if(response.status === 200) {
+                this.cardItems = response.data;
+            }
+        }).catch((error: any) => {
+            console.log(error)
+        })
+    }
+
+    /**
+     * 树选中
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    public treeSelect(event: any) {
+        if(!event || JSON.parse(event).length == 0) {
+            return;
+        }
+        const items: any = JSON.parse(event);
+        this.loadGroupData(items[0].id);
+    }
+
+    /**
+     * 分组表选中
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    public groupSelect(event: any) {
+        if (!event || !event.select) {
+            return;
+        }
+        if(!this.multiple) {
+            this.selects = [];
+        }
+        if(event.rselect) {
+            let index: number = this.selects.findIndex((item: any) => Object.is(event.rselect, item.id));
+            if(index >= 0) {
+                this.selects.splice(index, 1);
+            }
+        } else {
+            event.select.forEach((key: string) => {
+                let index: number = this.selects.findIndex((item: any) => Object.is(key, item.id));
+                if(index >= 0) {
+                    return;
+                }
+                let item: any = this.cardItems.find((item: any) => Object.is(key, item.id));
+                if (item) {
+                    this.selects.push(item);
+                }
+            });
+        }
+    }
+
+    /**
+     * 确认
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    public onOK() {
+        this.$emit('close', this.selects);
+    }
+    
+    /**
+     * 取消
+     *
+     * @type {*}
+     * @memberof IBizGroupPicker
+     */  
+    public onCancel() {
+        this.$emit('close');
+    }
+}
+</script>
+
+<style lang="less">
+.ibiz-group-picker{
+  width: 100%;
+  height: 100%;
+  .ibiz-group-container {
+      display: flex;
+      height: calc(100% - 65px);
+      .ibiz-group-tree {
+          min-width: 200px;
+          border-right: 1px solid #ddd;
+          padding: 0 34px 0 10px;
+          overflow: auto;
+          height: 100%;
+      }
+      .ibiz-group-content {
+          flex-grow: 1;
+          padding: 0 10px;
+          overflow: auto;
+          height: 100%;
+      }
+  }
+  .ibiz-group-footer {
+      padding: 16px;
+      text-align: right;
+      border-top: 1px solid #ddd;
+  }
+}
+</style>
\ No newline at end of file

src/components/ibiz-group-select/ibiz-group-select.vue

+<template>
+    <div class="ibiz-group-select">
+        <div class="ibiz-group-content">
+            <span v-if="!multiple">
+                {{ selectName }}
+            </span>
+            <template v-else v-for="(select, index) of selects">
+                <div :key="index" class="ibiz-group-item">
+                    {{ select.label }}
+                    <i v-if="!disabled" class="el-icon-close" @click="remove(select)"></i>
+                </div>
+            </template>
+        </div>
+        <div v-if="!disabled" class="ibiz-group-open">
+            <i v-if="!disabled && !multiple && selects.length > 0" class="el-icon-close" @click="remove(selects[0])"></i>
+            <i class="el-icon-search" @click="openView"></i>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
+import { Subject } from 'rxjs';
+
+@Component({})
+export default class IBizGroupSelect extends Vue {
+    /**
+     * 名称标识
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop() name!: string;
+
+    /**
+     * 树加载地址
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop() treeurl?:boolean;
+
+    /**
+     * 数据接口地址
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop() url!: string;
+
+    /**
+     * 多选
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop({default: false}) multiple?: boolean;
+
+    /**
+     * 数据对象
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop() data: any;
+
+    /**
+     * 过滤属性标识
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop() filter?: string;
+
+    /**
+     * 是否启用
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop() disabled?: boolean;
+
+    /**
+     * 值
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop() value: any;
+
+    /**
+     * 上下文参数
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop() context: any;
+
+    /**
+     * 关联属性
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop() valueitem: any;
+
+    /**
+     * 填充属性
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Prop() fillmap: any;
+
+    /**
+     * 选中项集合
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    protected selects: any[] = [];
+
+    /**
+     * 值变化
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    @Watch('value')
+    onValueChange(newVal: any) {
+        this.selects = [];
+        if (newVal) {
+            let item: any = {};
+            item.label = newVal.split(',');
+            if(this.valueitem) {
+                item.id = this.data[this.valueitem] ? this.data[this.valueitem].split(',') : [];
+            }
+            if(this.fillmap) {
+                for(let key in this.fillmap) {
+                    item[this.fillmap[key]] = this.data[key] ? this.data[key].split(',') : [];
+                }
+            }
+            item.label.forEach((val: string, index: number) => {
+                let _item: any = {};
+                for(let key in item) {
+                    _item[key] = item[key][index] ? item[key][index] : null;
+                }
+                this.selects.push(_item)
+            })
+        }
+    }
+
+    /**
+     * 单选时选中名称
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    get selectName() {
+        if(this.selects.length > 0) {
+            return this.selects[0].label;
+        }
+    }
+
+    /**
+     * 打开选择视图
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    public openView() {
+        const view: any = {
+            viewname: 'ibiz-group-picker',
+            title: (this.$t('components.iBizGroupSelect.groupSelect') as string)
+        };
+        const context: any = JSON.parse(JSON.stringify(this.context));
+        let filtervalue:string = "";
+        if(this.filter){
+            if(this.data[this.filter]){
+                filtervalue = this.data[this.filter];
+            }else if(context[this.filter]){
+                filtervalue = context[this.filter];
+            }else{
+                filtervalue = context.srforgid;
+            }
+        }else{
+            filtervalue = context.srforgid;
+        }
+        const param: any = {};
+        Object.assign(param, {
+            showtree: this.treeurl?true:false,
+            url:this.url,
+            treeurl:this.treeurl,
+            filtervalue: filtervalue,
+            multiple: this.multiple,
+            selects: this.selects
+        });
+        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);
+        });
+    }
+
+    /**
+     * 选择视图关闭
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    public openViewClose(result: any) {
+        this.selects = [];
+        if (result.datas && result.datas.length > 0) {
+            this.selects = result.datas
+        }
+        this.setValue()
+    }
+
+    /**
+     * 数据删除
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    public remove(item: any) {
+        this.selects.splice(this.selects.indexOf(item), 1);
+        this.setValue()
+    }
+
+    /**
+     * 设置值
+     *
+     * @type {*}
+     * @memberof IBizGroupSelect
+     */  
+    public setValue() {
+        let item: any = {};
+        item[this.name] = null;
+        if(this.valueitem) {
+            item[this.valueitem] = null;
+        }
+        if(this.fillmap) {
+            for(let key in this.fillmap) {
+                item[key] = null;
+            }
+        }
+        if(this.multiple) {
+            this.selects.forEach((select: any) => {
+                item[this.name] = item[this.name] ? `${item[this.name]},${select.label}` : select.label;
+                if(this.valueitem) {
+                    item[this.valueitem] = item[this.valueitem] ? `${item[this.valueitem]},${select.id}` : select.id;
+                }
+                if(this.fillmap) {
+                    for(let key in this.fillmap) {
+                        item[key] = item[key] ? `${item[key]},${select[this.fillmap[key]]}` : select[this.fillmap[key]];
+                    }
+                }
+            });
+        } else {
+            item = this.selects.length > 0 ? this.selects[0] : {};
+            item[this.name] = this.selects.length > 0 ? this.selects[0].label : null;
+            if(this.valueitem) {
+                item[this.valueitem] = this.selects.length > 0 ? this.selects[0].id : null;
+            }
+            if(this.fillmap) {
+                for(let key in this.fillmap) {
+                    item[key] = this.selects.length > 0 ? this.selects[0][this.fillmap[key]] : null;
+                }
+            }
+        }
+        for(let key in item) {
+            this.$emit('formitemvaluechange', { name: key, value: item[key] });
+        }
+    } 
+}
+</script>
+
+<style lang="less">
+.ibiz-group-select {
+    width: 100%;
+    display: flex;
+    border: 1px solid #DCDFE6;
+    min-height: 32px;
+    border-radius: 4px;
+    .ibiz-group-content {
+        flex-grow: 1;
+        padding: 0 16px;
+        .ibiz-group-item {
+            display: inline-block;
+            border: 1px solid #bbb;
+            line-height: 24px;
+            border-radius: 5px;
+            margin-right: 5px;
+            padding: 0 5px;
+        }
+    }
+    .ibiz-group-open {
+        display: flex;
+        text-align: center;
+        align-items: center;
+        padding: 0 5px;
+    }
+}
+.ibiz-group-select:hover {
+    border-color: #108cee;
+}
+</style>
\ No newline at end of file

src/components/input-box/input-box.vue

@@ -175,6 +175,7 @@ export default class InputBox extends Vue {
    */
   public addEvent(){
     if(Object.is(this.type, "number")){
+      this.$nextTick(() => {
         let inputNumber :any = document.getElementById(this.numberId);
         let handlerWrap :any = inputNumber.firstElementChild;
         handlerWrap.onmouseover=()=>{
@@ -184,6 +185,7 @@ export default class InputBox extends Vue {
         handlerWrap.onmouseout=()=>{
           inputNumber.style.paddingRight="0px";
         }
+      });
     }
   }