工时组件开发。

components/page/inputTime.vue

+<style lang="less">
+.timer {
+  .ivu-input-number {
+    width: 60px;
+  }
+  > span {
+    line-height: 30px;
+  }
+}
+</style>
+<template>
+  <div class="flex timer">
+    <div class="fg1">
+      <InputNumber v-model="hour" :formatter="value => `${value}`" :min="0" :max="100" />
+    </div>
+    <span>小时</span>
+    <div class="fg1">
+      <InputNumber v-model="minute" :formatter="value => `${value}`" :min="-1" :max="60" />
+    </div>
+    <span>分钟</span>
+    <div class="fg1">
+      <InputNumber v-model="second" :formatter="value => `${value}`" :min="0" :max="60" />
+    </div>
+    <span>秒</span>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      hour: 0,
+      minute: 0,
+      second: 0
+    };
+  },
+  model: {
+    prop: "value",
+    event: "on-change",
+  },
+    props: {
+    value: [Number],
+    
+  },
+  mounted(){
+      this.setTime(this.value)
+  },
+  methods: {
+    setTime(v) {
+      let h = parseInt(v / ( 60 * 60));
+      this.hour = h;
+      this.minute = parseInt((v - h *  60 * 60) / 60);
+      this.second = parseInt(v - h * 60 * 60 - this.minute * 60);
+    },
+    change(){
+        let result=0
+        result+=this.hour*60*60;
+        result+=this.minute*60;
+        result+=this.second;
+        this.$emit("on-change",result);
+    }
+  },
+  watch: {
+    value(v){
+        this.setTime(v);
+    },
+    second(v){
+        if(v>=60){
+            this.second=0
+            this.minute+=1;
+        }
+        this.change();
+    },
+    minute(v){
+        if(v>=60){
+            this.minute=0;
+            this.hour+=1;
+        }else if(v<0){
+            this.hour-=1;
+            this.minute=59;
+        }
+        this.change();
+    },
+    hour(v){
+        this.change();
+    }
+  }
+};
+</script>
\ No newline at end of file

pages/test/time.vue

+<template>
+  <div>
+      <div v-width="400">
+          <InputTime v-model="time"></InputTime>
+      </div>
+      
+      {{time}}
+  </div>
+</template>
+<script>
+export default {
+  layout: 'empty',
+  async fetch({ store, params }) {
+    await store.dispatch('loadDictionary') // 加载数据字典
+  },
+  data() {
+    return {
+      time: 39470,
+      
+    }
+  },
+  created() {
+    //   this.setList();
+    // alert(1234321)
+    // var arrs = []
+    // for (let i = 0; i < 5; i++) {
+    //   arrs.push(i)
+    // }
+    // this.list = arrs
+  },
+  mounted() {
+  },
+  methods: {
+  
+  },
+
+}
+</script>
\ No newline at end of file

plugins/iview.js

@@ -44,6 +44,7 @@ import ProductNumberSelect from '@/components/page/productNumberSelect.vue'
 import ProductSelect from '@/components/page/productSelect.vue'
 import DTSpan from '@/components/page/dtSpan.vue'
 import DTSearch from '@/components/page/dtSearch.vue'
+import InputTime from '@/components/page/inputTime.vue'
 
 // import FormMaking from 'form-making'
 // import 'form-making/dist/FormMaking.css'
@@ -94,6 +95,7 @@ Vue.component("ProductNumberSelect", ProductNumberSelect)
 Vue.component("ProductSelect", ProductSelect)
 Vue.component("DTSpan", DTSpan)
 Vue.component("DTSearch", DTSearch)
+Vue.component("InputTime", InputTime)
 
 //注入mock
 // require("../mock")