ocpview-plus 0.0.1

package/src/components/numberbox/numberrangebox.vue

@@ -0,0 +1,423 @@
+<template>
+  <Row v-show="myConfig.visible" type="flex" justify="start">
+    <Col span="11">
+      <Input
+        ref="smyControl"
+        v-model="slabel"
+        :size="myConfig.size"
+        :placeholder="myConfig.splaceholder"
+        :disabled="myConfig.readOnly"
+        :readonly="!myConfig.sallowInput"
+        @on-focus="sparser($event)"
+        @on-blur="_setFatherSvalue"
+        @keydown.enter.stop="_enterSetFatherSvalue"
+      >
+        <template v-if="showPrefix" #prepend>
+        <span >
+          <CommonIcon :type="myConfig.prefix" size="20" />
+        </span>
+        </template>
+         <template v-if="showUnit" #append>
+        <span >
+          <Tooltip content="最小值" placement="right">{{myConfig.unit}}</Tooltip>
+        </span>
+        <div v-if="myConfig.unitCustom" :style="'min-width:' + myConfig.unitWidth + 'px'">
+            <NumberRangeExpand  :render="myConfig.unitRender"  />
+        </div>
+          </template>
+      </Input>
+    </Col>
+    <Col span="2" style="text-align:center">{{myConfig.separate}}</Col>
+    <Col span="11">
+      <Input
+        ref="emyControl"
+        v-model="elabel"
+        :size="myConfig.size"
+        :placeholder="myConfig.eplaceholder"
+        :disabled="myConfig.readOnly"
+        :readonly="!myConfig.eallowInput"
+        @on-focus="eparser($event)"
+        @on-blur="_setFatherEvalue"
+        @keydown.enter.stop="_enterSetFatherEvalue"
+      >
+        <template v-if="showPrefix" #prepend>
+        <span >
+          <CommonIcon :type="myConfig.prefix" size="20" />
+        </span>
+        </template>
+         <template v-if="showUnit" #append>
+            <span >
+            <Tooltip content="最大值" placement="right">{{myConfig.unit}}</Tooltip>
+            </span>
+            <div v-if="myConfig.unitCustom" :style="'min-width:' + myConfig.unitWidth + 'px'">
+                <NumberRangeExpand  :render="myConfig.unitRender"  />
+            </div>
+         </template>
+      </Input>
+    </Col>
+  </Row>
+</template>
+<script>
+import Base from '@/components/base/controlbase.vue';
+import NumberRangeExpand from './append.js';
+export default {
+    name: 'NumberRangeBox',
+    extends: Base,
+    data() {
+        return {
+            myConfig: {
+                smax: Infinity,
+                smin: -Infinity,
+                emax: Infinity,
+                emin: -Infinity,
+                sallowInput: true,
+                eallowInput: true,
+                splaceholder: null,
+                eplaceholder: null,
+                separate: '~',
+                precision: 0,
+                format: 'n0',
+                defaultValue: 0,
+                rangeCheck: true,
+                showPrefix: false,
+                boundaryValue: true,
+                unitCustom:false,
+                unit: '',
+                prefix: '',
+                unitWidth: 80
+            },
+            prefix: '',
+            showUnit: false,
+            showPrefix: false,
+            slabel: '',
+            elabel: '',
+            svalue: '',
+            evalue: '',
+            oldSvalue: '',
+            oldEvalue: ''
+        };
+    },
+    props: {
+        fatherSvalue: {
+            type: [String, Number],
+            default: ''
+        },
+        fatherEvalue: {
+            type: [String, Number],
+            default: ''
+        }
+    },
+    components:{
+        NumberRangeExpand
+    },
+    methods: {
+        fatherValueToValue(value) {
+            let obj = this.myConfig.defaultValue;
+            if (this.config.defaultValue != undefined) {
+                obj = this.config.defaultValue;
+            }
+            if (Number(value) || Number(value) === 0) {
+                obj = Number(value);
+            }
+            if (value === '' && this.config.defaultValue === '') {
+                obj = value;
+            }
+            return obj;
+        },
+        _enterSetFatherSvalue() {
+            this.isEnter = true;
+            if (this.slabel === this.getLabel(this.svalue)) {
+                this.$refs.smyControl.blur();
+                this.$refs.emyControl.focus();
+                this.isEnter = false;
+                return;
+            } else {
+                 this._setFatherSvalue();
+            }
+        },
+        _enterSetFatherEvalue() {
+            this.isEnter = true;
+            if (this.elabel === this.getLabel(this.evalue)) {
+                if (this.$parent.enterKeyDown) {
+                    this.$parent.enterKeyDown(); 
+                    this.isEnter = false;
+                }
+                return;
+            } else {
+                 this._setFatherEvalue();
+            }
+        },
+        valueToFatherValue() {
+            let para = {};
+            para.svalue = this.svalue + '';
+            para.evalue = this.evalue + '';
+            para.sname = this.config.sname;
+            para.ename = this.config.ename;
+            return para;
+        },
+        customInit() {
+            if (this.myConfig.format && this.myConfig.format.length > 1) {
+                this.myConfig.precision = Number(this.myConfig.format[1]);
+                if (this.myConfig.showPrefix) {
+                    if (!this.myConfig.prefix) {
+                        if (this.myConfig.format.startsWith('c')) {
+                            this.showPrefix = true;
+                            this.myConfig.prefix = 'logo-yen';
+                        }
+                    } else {
+                        this.showPrefix = false;
+                    }
+                } else {
+                    this.showPrefix = false;
+                }
+
+                if (this.myConfig.unit) {
+                    this.showUnit = true;
+                }
+            }
+            if (this.myConfig.placeholder) {
+                if (!this.myConfig.splaceholder) {
+                    this.myConfig.splaceholder = this.myConfig.placeholder;
+                }
+                if (!this.myConfig.eplaceholder) {
+                    this.myConfig.eplaceholder = this.myConfig.placeholder;
+                }
+            }
+            if (this.myConfig.unitRender) { 
+                this.myConfig.unitCustom = true;
+            } else {
+                this.myConfig.unitCustom = false; 
+            }
+
+            this.svalue = this._fatherValueToValue(this.fatherSvalue);
+            this.oldSvalue = this.svalue;
+            this.slabel = this.$Method.formatNumber(this.svalue, this.myConfig.format, this.myConfig.notzero);
+            if (this.svalue === '' && this.myConfig.defaultValue === '') {
+                this.slabel = this.svalue;
+            }
+
+            this.evalue = this._fatherValueToValue(this.fatherEvalue);
+            this.oldEvalue = this.evalue;
+            this.elabel = this.$Method.formatNumber(this.evalue, this.myConfig.format, this.myConfig.notzero);
+            if (this.evalue === '' && this.myConfig.defaultValue === '') {
+                this.elabel = this.evalue;
+            }
+            this.setFatherValue();
+        },
+
+        _setFatherSvalue() {
+            if (this.slabel === this.getLabel(this.svalue)) {
+                return;
+            }
+            if (this.slabel === '' && this.myConfig.defaultValue === '') {
+                this.svalue = '';
+            } else {
+                if (!Number(this.slabel) && Number(this.slabel) !== 0) {
+                    this.slabel = this.myConfig.defaultValue;
+                }
+                if (this.myConfig.boundaryValue) {
+                    if (Number(this.slabel) < this.myConfig.smin) {
+                        this.alert('开始值不能小于' + this.myConfig.smin);
+                        this.slabel = this.myConfig.smin;
+                    }
+                    if (Number(this.slabel) > this.myConfig.smax) {
+                        this.alert('开始值不能大于' + this.myConfig.smax);
+                        this.slabel = this.myConfig.smax;
+                    }
+                } else {
+                    if (Number(this.slabel) <= this.myConfig.smin) {
+                        this.alert('开始值不能小于且等于' + this.myConfig.smin);
+                        this.setSvalueFail();
+                        return false;
+                    }
+                    if (Number(this.slabel) >= this.myConfig.smax) {
+                        this.alert('开始值不能大于且等于' + this.myConfig.smax);
+                        this.slabel = this.myConfig.smax;
+                        this.setSvalueFail();
+                        return false;
+                    }
+                }
+
+                if (this.myConfig.rangeCheck) {
+                    if (this.elabel) {
+                        if (Number(this.slabel) > Number(this.evalue)) {
+                            this.alert('开始值不能大于结束值');
+                            this.slabel = this.evalue;
+                        }
+                    }
+                }
+                this.svalue = this.$Method.precisionNumber(this.slabel,this.myConfig.format);
+                if (this.slabel === '' && this.myConfig.defaultValue === '') {
+                    this.svalue = this.slabel;
+                }
+            }
+
+            this.setFatherValue('sname');
+        },
+        customEnterKeyDown(e) {
+            if (e === 'sname') {
+               this.smultiKeyDown();
+            } else {
+                if (this.$parent.enterKeyDown) {
+                    this.$parent.enterKeyDown();
+                }
+            }
+        },
+        _setFatherEvalue(e) {
+            if (this.elabel === this.getLabel(this.evalue)) {
+                return;
+            }
+            if (this.elabel === '' && this.myConfig.defaultValue === '') {
+                this.evalue = '';
+            } else {
+                if (!Number(this.elabel) && Number(this.elabel) !== 0) {
+                    this.elabel = this.myConfig.defaultValue;
+                }
+                if (this.myConfig.boundaryValue) {
+                    if (Number(this.elabel) < this.myConfig.emin) {
+                        this.alert('结束值不能小于' + this.myConfig.emin);
+                        this.elabel = this.myConfig.emin;
+                    }
+                    if (Number(this.elabel) > this.myConfig.emax) {
+                        this.alert('结束值不能小于' + this.myConfig.emax);
+                        this.elabel = this.myConfig.emax;
+                    }
+                } else {
+                    if (Number(this.elabel) <= this.myConfig.emin) {
+                        this.alert('结束值不能小于且等于' + this.myConfig.emin);
+                        this.setEvalueFail();
+                        return false;
+                    }
+                    if (Number(this.elabel) >= this.myConfig.emax) {
+                        this.alert('结束值不能大于且等于' + this.myConfig.emax);
+                        this.setEvalueFail();
+                        return false;
+                    }
+                }
+
+                if (this.myConfig.rangeCheck) {
+                    if (this.slabel) {
+                        if (Number(this.elabel) < Number(this.svalue)) {
+                            this.elabel = this.svalue;
+                        }
+                    }
+                }
+                this.evalue = this.$Method.precisionNumber(this.elabel,this.myConfig.format);
+                if (this.elabel === '' && this.myConfig.defaultValue === '') {
+                    this.evalue = this.elabel;
+                }
+            }
+
+            this.setFatherValue();
+        },
+        setFatherValueSuccess() {
+            this.oldSvalue = this.svalue;
+            this.slabel = this.$Method.formatNumber(this.svalue, this.myConfig.format, this.myConfig.notzero);
+            if (this.svalue === '' && this.myConfig.defaultValue === '') {
+                this.slabel = this.svalue;
+            }
+            this.oldEvalue = this.evalue;
+            this.elabel = this.$Method.formatNumber(this.evalue, this.myConfig.format, this.myConfig.notzero);
+            if (this.evalue === '' && this.myConfig.defaultValue === '') {
+                this.elabel = this.evalue;
+            }
+            this.$emit('inputValue', this.valueToFatherValue());
+        },
+        setFatherValueFail(e) {
+            if (e === 'sname') {
+                this.setSvalueFail();
+            } else {
+                this.setEvalueFail();
+            }
+        },
+        setSvalueFail() {
+            this.svalue = this.oldSvalue;
+            this.slabel = this.$Method.formatNumber(this.svalue, this.myConfig.format, this.myConfig.notzero);
+            if (this.oldSvalue === '' && this.myConfig.defaultValue === '') {
+                this.slabel = this.oldSvalue;
+            }
+            this.$nextTick(() => {
+                this.$refs.smyControl.focus();
+            });
+        },
+        setEvalueFail() {
+            this.evalue = this.oldEvalue;
+            this.elabel = this.$Method.formatNumber(this.evalue, this.myConfig.format, this.myConfig.notzero);
+            if (this.oldEvalue === '' && this.myConfig.defaultValue === '') {
+                this.elabel = this.oldEvalue;
+            }
+            this.$nextTick(() => {
+                this.$refs.emyControl.focus();
+            });
+        },
+        getValueNumber(curlvalue) {
+            if (curlvalue) {
+                let value = Number(curlvalue)
+                let float = 0;
+                if (this.myConfig.format) {
+                    if (this.myConfig.format.length > 1) {
+                        float = Number(this.myConfig.format[1]);
+                        if ('p' === this.myConfig.format[0]) {
+                            float = float + 2;
+                        }
+                    }
+                }
+                return Number(value.toFixed(float));
+            } else {
+                return curlvalue;
+            }
+        }, 
+        sparser(event) {
+            this.slabel = this.getValueNumber(this.svalue);
+            if (event) {
+                event.currentTarget.select();
+            }
+        },
+        eparser(event) {
+            this.elabel =this.getValueNumber(this.evalue);
+            if (event) {
+                event.currentTarget.select();
+            }
+        },
+        smultiKeyDown(e) {
+            this.$refs.smyControl.blur();
+            this.$nextTick(() => {
+                this.$refs.emyControl.focus();
+            });
+            // e.stopPropagation();
+        },
+        setFocus(value) {
+            if (value) {
+                this.$refs.smyControl.focus();
+            } else {
+                this.$refs.emyControl.blur();
+            }
+        },
+        getLabel(value) {
+            return this.$Method.formatNumber(value, this.myConfig.format, this.myConfig.notzero);
+        }
+    },
+    watch: {
+        fatherSvalue: {
+            handler(newValue) {
+                this.svalue = this._fatherValueToValue(newValue);
+                this.oldSvalue = this.svalue;
+                this.slabel = this.$Method.formatNumber(this.svalue, this.myConfig.format, this.myConfig.notzero);
+                if (newValue === '' && this.myConfig.defaultValue === '') {
+                    this.slabel = newValue;
+                }
+            }
+        },
+        fatherEvalue: {
+            handler(newValue) {
+                this.evalue = this._fatherValueToValue(newValue);
+                this.oldEvalue = this.evalue;
+                this.elabel = this.$Method.formatNumber(this.evalue,this.myConfig.format, this.myConfig.notzero);
+                if (newValue === '' && this.myConfig.defaultValue === '') {
+                    this.elabel = newValue;
+                }
+            }
+        }
+    }
+};
+</script>