ocpview-plus 0.0.1

package/src/components/textbox/textbox.vue

@@ -0,0 +1,98 @@
+
+<template>
+  <div v-show="myConfig.visible">
+    <Input
+      ref="myControl"
+      v-model="value"
+      :size="myConfig.size"
+      :type="myConfig.vtype"
+      :password="passwordFlag"
+      :rows="myConfig.rows"
+      :placeholder="myConfig.placeholder"
+      :maxlength="myConfig.maxLength"
+      :disabled="myConfig.readOnly"
+      :clearable="myConfig.clearable"
+      :readonly="!myConfig.allowInput"
+      @keydown.enter.stop="_enterSetFatherValue"
+       @keyup="keyUp"
+      @on-blur="setFatherValue"
+      :search="myConfig.search"
+      @on-search="search"
+    >
+    <template v-if="myConfig.showAppend"  #append>
+    <Button :size="myConfig.size" type="primary"  :disabled="myConfig.readOnly" @click="appendClick">{{myConfig.appendText}}</Button>
+    </template>
+    </Input>
+  </div>
+</template>
+<script>
+import Base from '@/components/base/controlbase.vue';
+export default {
+  name: 'textbox',
+  extends: Base,
+  components: {},
+  data() {
+    return {
+      myConfig: {
+        maxLength: null,
+        vtype: 'text',
+        defaultValue: '',
+        rows: 3,
+        clearable: false,
+        appendWidth:80,
+        search: false,
+        allowInput: true,
+        showAppend:false,
+        notSpecial:false
+      },
+      passwordFlag: false,
+    };
+  },
+  methods: {
+     keyUp(e)  {
+        if (this.myConfig.notSpecial) {
+            e.target.value = e.target.value.replace(/[`~!@$%^&*()_\-+=<>?:"{}|,\/;'\\[\]·~！@￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '')
+        }
+    },
+    customInit() {
+      if (this.myConfig.vtype === 'password') {
+        this.passwordFlag = true;
+        if (this.myConfig.passwordFlag !== undefined) {
+          this.passwordFlag = this.myConfig.passwordFlag;
+        }
+      } else {
+        this.passwordFlag = false;
+      }
+    },
+    _enterSetFatherValue() {
+        if (this.myConfig.vtype !== 'textarea') {
+            this.isEnter = true;
+        }  
+        this.setFatherValue();
+    },
+    search() {
+      if (this.myConfig.onSearch) {
+        if (this.myConfig.readOnly !== true) {
+          let that = this;
+          let temp = {};
+          temp.control = that;
+          temp.name = this.myConfig.name;
+          this.myConfig.onSearch(temp);
+        }
+      }
+    },
+    appendClick() {
+      if (this.myConfig.onAppend) {
+        this.myConfig.onAppend();
+      }
+    },
+    setFocus(value) {
+      if (value) {
+        this.$refs.myControl.focus();
+      } else {
+         this.$refs.myControl.blur();
+      }
+    }
+  },
+};
+</script>

package/src/components/timebox/index.js

@@ -0,0 +1,2 @@
+import TimePicBox from './timebox.vue';
+export default TimePicBox;

package/src/components/timebox/timebox.vue

@@ -0,0 +1,76 @@
+<template> 
+ <div v-show="myConfig.visible">
+    <TimePicker  ref="myControl" v-model="value" :transfer="myConfig.transfer" :format="myConfig.format" :vtype="myConfig.vtype"  :size="myConfig.size" :placeholder="myConfig.placeholder"  clearable  :disabled="myConfig.readOnly"    @on-change="setFatherValue"  @keydown.enter.stop="_enterSetFatherValue" @on-open-change="onOpenChange" style="width:100%" />
+ </div>
+</template>
+<script>
+    import Base from '@/components/base/controlbase.vue';
+    export default {
+        name: 'timepicbox',
+        extends: Base,
+        data () {
+            return {
+                myConfig: {
+                    vtype:'hmtime',
+                    format:'HH:mm',
+                    defaultValue:null,
+                    transfer:false
+                },
+                value:null,
+                oldValue:null
+            };
+        },
+        props:{
+            fatherValue: {
+                type: [String, Date], 
+                default: null
+            }
+        },
+        methods: {
+            fatherValueToValue (value) {
+                if (value) {
+                    return this.fatherValue;
+                } else {
+                    return this.myConfig.defaultValue;
+                }
+            },
+            valueToFatherValue() {
+                let para= {};
+                if (!this.value) {
+                    para.value = '';
+                } else {
+                    para.value = this.value;
+                }
+                return para;
+            },
+            customInit() {
+                if (this.config && this.config.format  === undefined) {
+                    if (this.myConfig.vtype === 'hmtime') {
+                        this.myConfig.format = 'HH:mm';
+                    } else if (this.myConfig.vtype === 'hmstime') {
+                        this.myConfig.format = 'HH:mm:ss';
+                    }
+                }
+            },
+            setFocus(value) {
+                if (value) {
+                    this.$refs.myControl.$refs.input.focus()
+                    this.$refs.myControl.isFocused = true;
+                } else {
+                    this.$refs.myControl.$refs.input.blur()
+                    this.$refs.myControl.isFocused = false;
+                    this.$refs.myControl.handleClose();
+                }
+            },
+            onOpenChange(value) {
+                if (this.config.onOpenChange) {
+                    this.config.onOpenChange(value);
+                }
+            },
+             _enterSetFatherValue() {
+                this.isEnter = true;
+                this.setFatherValue();
+            }
+        }
+    };
+</script>

package/src/components/toolbar/ebutton.vue

@@ -0,0 +1,169 @@
+<template> 
+<div v-if="visible" :style="divStyle" @click="doAction(btn.name)"  v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)"  >
+    <Row type="flex" justify="center">
+      <Col>
+            <CommonIcon :type="btn.iconcls"  :size="iconSize" :color="iconColor"></CommonIcon>
+            <Span  v-show="fontplacement === 'right' && btn.text !== undefined"  :style="fontStyle">{{btn.text}} </Span>   
+      </Col>
+    </Row>
+    <Row v-show="fontplacement === 'bottom' && btn.text !== undefined " type="flex" justify="center" >
+        <Col>
+           <Span  :style="fontStyle">{{btn.text}} </Span>
+        </Col>
+    </Row>
+</div>
+</template>
+<script>
+import { oneOf } from '../../utils/assist';
+export default {
+    name: 'ebutton',
+    data () {
+        return {
+            visible:true,
+            btn:{
+            },
+            colorStyle: {
+                selected:'#2d8cf0',
+                unselected:'#3f414d',
+                disabled:'#c5c8ce'
+            },
+            mouseStyle:{
+                usable:'cursor: pointer',
+                disabled:'cursor:not-allowed'
+            },
+            iconStyle: {
+                seletedSize:40,
+                unseletedSize:30
+            },
+            divStyle: 'cursor: pointer',
+            disabled: false,
+            iconSize: 30,
+            fontStyle:'font-size: 10px;color:#3f414d',
+            iconColor:'#3f414d',
+        };
+    },
+    props: {
+        config: {
+            type:Object,
+            default:null
+        },
+        amplify:{
+            type:Boolean,
+            default:true
+        },
+        dynamic:{
+            type:Boolean,
+            default:true
+        },
+        type: {
+            type:String,
+            default:'',
+        },
+        size: {
+            type:Number,
+            default:30,
+        },
+        color: {
+            type:String,
+            default:'', 
+        },
+        text: {
+            type:String,
+            default:'', 
+        },
+        fontsize: {
+            type:String,
+            default:'10px', 
+        },
+        fontplacement: {
+            validator (value) {
+                return oneOf(value, ['bottom', 'right']);
+            },
+            default: 'bottom'
+        }
+
+    },
+    created () {
+        if (this.config) {
+            this.btn = this.config;
+            if (this.config.size) {
+                this.iconSize = this.config.size;
+            }
+            if (this.config.color) {
+                this.iconColor = this.config.color;
+            }
+        } else {
+            this.btn.iconcls = this.type;
+            this.btn.text = this.text;
+            this.iconSize = this.size;
+            this.iconColor = this.color;
+        }
+        this.setStyle('unselected');
+    },
+    methods: {
+        doAction(para) {
+            if (!this.disabled) {
+                this.$emit('click', para);
+            }
+           
+        },
+        changeActive() {
+            if (this.dynamic) {
+                this.setStyle('selected');
+            }
+        },
+        removeActive() {
+            if (this.dynamic) {
+                this.setStyle('unselected');
+            }
+        },
+        setStyle (action) {
+            switch(action) {
+                case 'selected':
+                    if (!this.disabled) {
+                        this.fontStyle = 'font-size: ' + this.fontsize + ';color:' + this.colorStyle.selected;
+                        if (this.amplify) {
+                            this.iconSize = this.iconStyle.seletedSize;
+                            this.iconColor = this.colorStyle.selected;
+                        }
+                    }
+                    break;
+                case 'unselected':
+                    if (!this.disabled) {
+                        this.fontStyle = 'font-size: ' + this.fontsize + ';color:' + this.colorStyle.unselected;
+                        if (this.amplify) {
+                            this.iconSize = this.iconStyle.unseletedSize;
+                            this.iconColor = this.colorStyle.unselected;
+                        }
+                       
+                    }
+                    break;
+                case 'disabled':
+                    if (this.disabled) {
+                        this.fontStyle = 'font-size: ' + this.fontsize + ';color:' + this.colorStyle.disabled;
+                        if (this.amplify) {
+                            this.iconSize = this.iconStyle.unseletedSize;
+                            this.iconColor = this.colorStyle.disabled;
+                        }
+                        this.divStyle = this.mouseStyle.disabled;
+                    } else {
+                        this.divStyle = this.mouseStyle.usable;
+                        this.setStyle('unselected');
+                    }
+                    break;
+                default:
+                    break;
+                   
+
+            }
+        },
+        setEnabled (flag) {
+            this.disabled = flag;
+            this.setStyle('disabled');
+        },
+        setVisible(value) {
+            this.visible = value;
+        }
+    }
+};
+</script>

package/src/components/toolbar/index.js

@@ -0,0 +1,3 @@
+import Ebutton from './ebutton.vue';
+import Toolbar from './toolbar.vue';
+export {Ebutton,Toolbar};