feat: 自定义带毫秒数的时间组件

src/components/CustomTimeInput/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="custom-time-input">
+    <template v-for="(item, index) in setting">
+      <a-input-number
+        :key="index"
+        :formatter="(value) => `${value}`"
+        :precision="0"
+        :parser="(value) => value.replace('.', '')"
+        :step="1"
+        :max="item.max"
+        :min="item.min"
+        v-model="innerValue[index]"
+      ></a-input-number>
+      <span v-if="index !== setting.length - 1" :key="'_' + index">:</span>
+    </template>
+  </div>
+</template>
+
+<script>
+const setting = [
+  {
+    min: 0,
+    max: 23,
+  },
+  {
+    min: 0,
+    max: 59,
+  },
+  {
+    min: 0,
+    max: 59,
+  },
+  {
+    min: 0,
+    max: 999,
+  },
+]
+export default {
+  props: {
+    value: {
+      type: String,
+    },
+  },
+  data() {
+    this.setting = setting
+
+    return {
+      innerValue: this.splitValue(this.value),
+    }
+  },
+  methods: {
+    splitValue(value) {
+      if (value) {
+        const arr = value.split(':')
+        if (arr.length < setting.length) {
+          // 如果给的值小于位数，补全
+          for (let i = 0; i < setting.length - arr.length; i++) {
+            arr.push(0)
+          }
+        }
+        return arr
+      } else {
+        return [0, 0, 0, 0]
+      }
+    },
+  },
+  watch: {
+    value(val) {
+      this.splitValue(val)
+    },
+    innerValue(val) {
+      const newVal = val.join(':')
+      this.$emit('input', newVal)
+      this.$emit('change', newVal)
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.custom-time-input {
+  .ant-input-number {
+    width: 25px;
+    border: 0;
+    box-shadow: none;
+
+    ::v-deep {
+      .ant-input-number-handler-wrap {
+        display: none;
+      }
+
+      input {
+        padding: 0;
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

src/views/spectrumAnalysis/components/Modals/BetaGammaModals/BetaGammaRLRModal/components/GeneralInfomation.vue

@@ -21,7 +21,12 @@
 <script>
 import { cloneDeep } from 'lodash'
 import dateFormat from '@/components/jeecg/JEasyCron/format-date'
+import CustomTimeInput from '@/components/CustomTimeInput/index.vue'
+
 export default {
+  components: {
+    CustomTimeInput,
+  },
   computed: {
     columns() {
       return [
@@ -91,14 +96,14 @@ export default {
         },
         {
           label: 'Receipt time [HH:mm:ss.S]',
-          type: 'a-time-picker',
+          type: 'CustomTimeInput',
           dataIndex: 'receiptTime',
           attrs: {
             format: 'HH:mm:ss',
             valueFormat: 'HH:mm:ss',
           },
           on: {
-            change: (mont, date) => {
+            change: (date) => {
               this.detail.receiptTime = date
               this.handleValChange(date)
             },
@@ -120,14 +125,14 @@ export default {
         },
         {
           label: 'Report transmission time [HH:mm:ss.S]',
-          type: 'a-time-picker',
+          type: 'CustomTimeInput',
           dataIndex: 'reportTransmissionTime',
           attrs: {
             format: 'HH:mm:ss',
             valueFormat: 'HH:mm:ss',
           },
           on: {
-            change: (mont, date) => {
+            change: (date) => {
               this.detail.reportTransmissionTime = date
               this.handleValChange(date)
             },