新增ip地址输入框组件

src/app-register.ts

@@ -103,6 +103,7 @@ import AppVuePivottable from './components/app-vue-pivottable/app-vue-pivottable
 import AppMapPosition from './components/app-map-position/app-map-position.vue';
 import AppSortBar from './components/app-sort-bar/app-sort-bar.vue';
 import AppAfterTime from './components/app-after-time/app-after-time.vue';
+import AppInputIp from './components/app-input-ip/app-input-ip.vue';
 
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
@@ -221,5 +222,6 @@ export const AppComponents = {
         v.component('app-map-position', AppMapPosition);
         v.component('app-sort-bar', AppSortBar);
         v.component('app-after-time', AppAfterTime);
+        v.component('app-input-ip', AppInputIp);
     },
 };
\ No newline at end of file

src/components/app-input-ip/app-input-ip.less

+input{
+    border-radius: 4px;
+    border:1px solid #888;
+    padding: 2px 10px;
+    width: 20%;
+}

src/components/app-input-ip/app-input-ip.vue

+<template>
+    <div class="app-inpu-ip">
+        <input  
+            type="text" 
+            v-model="firstIp"
+            maxlength="3" />.
+        <input          
+            type="text" 
+            v-model="secIp"
+            maxlength="3" />.
+        <input 
+            type="text"
+            maxlength="3" 
+            v-model="thirdIp" />.
+        <input 
+            type="text" 
+            maxlength="3"
+            v-model="forIp" />
+    </div>     
+</template>
+
+<script lang='ts'>
+import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator';
+import { Subject,Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+@Component({
+})
+export default class AppInputIp extends Vue {  
+
+    /**
+     * 应用上下文
+     * 
+     * @type {any}
+     * @memberof AppInputIp
+     */
+    @Prop() context: any;
+
+    /**
+     * 视图参数
+     * 
+     * @type {any}
+     * @memberof AppInputIp
+     */
+    @Prop() viewparam: any;
+
+    /**
+     * 表单状态对象
+     *
+     * @type {Subject<any>}
+     * @memberof AppInputIp
+     */
+    @Prop() public formState!: Subject<any>;
+
+    /**表单数据绑定
+     * 
+     * @type {string}
+     * @memberof AppInputIp
+     */
+    @Model('change') public ipdata!: string;
+
+    /**
+     * 获取当前值
+     *
+     * @type {string}
+     * @memberof AppInputIp
+     */
+    public CurValue: any[] = [];
+
+    /**
+     * 第一段ip
+     * 
+     * @type {any}
+     * @memberof AppInputIp
+     */
+    public firstIp: any = '';
+
+    /**
+     * 第二段ip
+     * 
+     * @type {any}
+     * @memberof AppInputIp
+     */
+    public secIp: any = '';
+
+    /**
+     * 第三段ip
+     * 
+     * @type {any}
+     */
+    public thirdIp: any = '';
+
+    /**
+     * 第四段ip
+     * 
+     * @type {any}
+     * @memberof AppInputIp
+     */
+    public forIp: any = '';
+   
+    /**
+     * Vue声明周期(处理组件的输入属性)
+     *
+     * @memberof AppInputIp
+     */
+    public created(){
+        if(this.formState){
+             this.formState.subscribe(({type,data})=>{  
+                if(Object.is('load',type)){
+                    this.loadData();
+                }
+            })
+        }
+        this.loadData();
+    } 
+
+    /**
+     * 加载数据
+     *
+     * @memberof AppInputIp
+     */
+    public loadData(){
+        if(this.ipdata){
+            let iparr:Array<any> = this.ipdata.split('.');
+            this.CurValue = iparr;
+            this.firstIp = this.CurValue[0];
+            this.secIp = this.CurValue[1];
+            this.thirdIp = this.CurValue[2];
+            this.forIp = this.CurValue[3];
+        }
+    }
+
+    /**
+     * 监听每段ip变化
+     * 
+     * @memberof AppInputIp
+     */
+    @Watch('firstIp')
+    public FirstIpChange(newVal:any,oldVal:any){
+        this.checkIpVal(newVal,oldVal,'firstIp',0);
+    }
+
+    @Watch('secIp')
+    public SecIpChange(newVal:any,oldVal:any){
+        this.checkIpVal(newVal,oldVal,'secIp',1);
+    }
+
+    @Watch('thirdIp')
+    public ThirdIpChange(newVal:any,oldVal:any){
+        this.checkIpVal(newVal,oldVal,'thirdIp',2);
+    }
+
+    @Watch('forIp')
+    public ForIpChange(newVal:any,oldVal:any){
+        this.checkIpVal(newVal,oldVal,'forIp',3);
+    }
+
+    /**
+     * 验证格式
+     * 
+     * @memberof AppInputIp
+     */
+    public checkIpVal(newVal:any,oldVal:any,flag:any,index:number){
+        if(newVal === '') return
+        let val = newVal;
+        let reg = /^(([0-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5]))))$/g;
+        if(reg.test(val)){
+            this.CurValue[index] = val; 
+        }else{
+            if(flag){
+                let that:any = this;
+                that[flag] = oldVal;
+                this.CurValue[index] = oldVal;
+            }
+        }
+        if(this.firstIp && this.secIp && this.thirdIp && this.forIp){
+            this.$emit('change',this.firstIp+'.'+this.secIp+'.'+this.thirdIp+'.'+this.forIp);
+        }
+    }
+}
+</script>
+
+<style lang='less'>
+@import './app-input-ip.less';
+</style>