cnhis-design-vue 2.1.56 → 2.1.58

package/packages/scale-view/formitem/r-time.vue

@@ -1,285 +1,285 @@
-<template>
-  <div>
-    <!-- 日期选择器 -->
-    <template v-if="type == 'DATE'">
-      <a-date-picker
-        v-if="startToStop != 1"
-        v-model="timeValue"
-        @change="changeDate"
-        :disabled="isLock"
-      />
-      <!-- 日期选择器起止类型 -->
-      <a-range-picker v-else v-model="rangeValue" @change="changeRange" />
-    </template>
-    <template v-else-if="type == 'TIME'">
-      <!-- 时间选择器 -->
-      <a-time-picker
-        v-if="startToStop != 1"
-        v-model="timeValue"
-        @change="changeTime"
-        :disabled="isLock"
-      />
-      <!-- 时间选择器起止类型 -->
-      <slot v-if="startToStop == 1">
-        <a-time-picker
-          :disabled="isLock"
-          v-model="rangeValue[0]"
-          @change="changeRangeTime"
-          :disabledHours="disStartHours"
-          :disabledMinutes="disStartMinute"
-          :disabledSeconds="disStartSeconds"
-        />
-        -
-        <a-time-picker
-          :disabled="isLock"
-          v-model="rangeValue[1]"
-          @change="changeRangeTime"
-          :disabledHours="disEndHours"
-          :disabledMinutes="disEndMinute"
-          :disabledSeconds="disEndSeconds"
-        />
-      </slot>
-    </template>
-    <template v-else-if="type == 'DATETIME'">
-      <div v-if="dateType == 'time'">
-        <!-- 时间选择器 -->
-        <a-time-picker
-          v-if="startToStop != 1"
-          v-model="timeValue"
-          @change="changeTime"
-          :disabled="isLock"
-        />
-        <!-- 时间选择器起止类型 -->
-        <slot v-if="startToStop == 1">
-          <a-time-picker
-            :disabled="isLock"
-            v-model="rangeValue[0]"
-            @change="changeRangeTime"
-            :disabledHours="disStartHours"
-            :disabledMinutes="disStartMinute"
-            :disabledSeconds="disStartSeconds"
-          />
-          -
-          <a-time-picker
-            :disabled="isLock"
-            v-model="rangeValue[1]"
-            @change="changeRangeTime"
-            :disabledHours="disEndHours"
-            :disabledMinutes="disEndMinute"
-            :disabledSeconds="disEndSeconds"
-          />
-        </slot>
-      </div>
-      <div v-else>
-        <a-date-picker
-          v-if="startToStop != 1"
-          v-model="timeValue"
-          @change="changeDate"
-          :disabled="isLock"
-          :show-time="dateType == 'datetime'"
-          :showToday="false"
-          dropdownClassName="scale-time-picker"
-        />
-        <!-- 日期选择器起止类型 -->
-        <a-range-picker
-          v-else
-          v-model="rangeValue"
-          @change="changeRange"
-          :show-time="dateType == 'datetime'"
-          :placeholder="rangePlaceholder"
-        />
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import moment from 'moment'
-import { DatePicker, TimePicker } from "ant-design-vue";
-import utils from "@/utils/utils-map";
-export default {
-  props: {
-    value: { type: [String, Array, Object] },
-    type: { default: "DATE" },
-    startToStop: { type: [String, Number] },
-    dateType: { type: String, default: "date" },
-    options: { type: Array, default: () => [] },
-    isLock: { type: Boolean, default: false }
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(value) {
-        if (value) {
-          this.defaultValue(value);
-        }
-      }
-    }
-  },
-  computed: {
-    rangePlaceholder() {
-      return this.dateType === "datetime" ? ["开始时间", "结束时间"] : ["开始日期", "结束日期"];
-    }
-  },
-  data() {
-    return {
-      dateFormat: "YYYY-MM-DD",
-      timeFormat: "HH:mm:ss",
-      timeValue: null,
-      rangeValue: [],
-      Hours: Array.from(Array(24), (v, k) => k),
-      Minutes: Array.from(Array(60), (v, k) => k),
-      Seconds: Array.from(Array(60), (v, k) => k)
-    };
-  },
-  created() {
-    this.handleFormat();
-  },
-  methods: {
-    handleFormat() {
-      if (this.dateType == "datetime") {
-        this.dateFormat = "YYYY-MM-DD HH:mm:ss";
-      }
-    },
-    defaultValue(value) {
-      this.handleFormat();
-      let { type, startToStop, dateFormat, timeFormat } = this;
-      let tempValue = value;
-      if (utils.isJSON(value)) {
-        tempValue = JSON.parse(value);
-      }
-      const result = JSON.parse(JSON.stringify(tempValue));
-      if (utils.isEmpty(result)) {
-        return result;
-      } else {
-        if (type == "TIME" || this.dateType == "time") {
-          if (startToStop == 1) {
-            this.rangeValue = [
-              result[0] ? moment(result[0], timeFormat) : null,
-              result[1] ? moment(result[1], timeFormat) : null
-            ];
-            return;
-          } else {
-            this.timeValue = moment(result, timeFormat);
-            return;
-          }
-        } else {
-          if (startToStop == 1) {
-            this.rangeValue = [
-              moment(result[0], dateFormat),
-              moment(result[1], dateFormat)
-            ];
-            return;
-          } else {
-            this.timeValue = moment(result, dateFormat);
-            return;
-          }
-        }
-      }
-    },
-    changeDate(v) {
-      let data = v ? moment(v).format(this.dateFormat) : "";
-      this.$emit("change", data);
-    },
-    changeRange(v) {
-      this.$emit(
-        "change",
-        v.map(item => moment(item).format(this.dateFormat))
-      );
-    },
-    changeTime(v) {
-      let data = v ? moment(v).format(this.timeFormat) : "";
-      this.$emit("change", data);
-    },
-    changeRangeTime() {
-      this.$emit(
-        "change",
-        this.rangeValue.map(item => {
-          if (item) {
-            return moment(item).format(this.timeFormat);
-          } else {
-            return "";
-          }
-        })
-      );
-    },
-    disStartHours() {
-      let endTime = this.rangeValue[1];
-      if (endTime) {
-        let h = endTime.hour();
-        return this.Hours.slice(h, this.Hours.length - 1);
-      }
-      return [];
-    },
-    disStartMinute(h) {
-      let endTime = this.rangeValue[1];
-      if (endTime) {
-        if (h < endTime.hour()) return [];
-        let m = endTime.minute();
-        return this.Minutes.slice(m, this.Minutes.length - 1);
-      }
-      return [];
-    },
-    disStartSeconds(h, m) {
-      let endTime = this.rangeValue[1];
-      if (endTime) {
-        if (h < endTime.hour()) return [];
-        if (m < endTime.minute()) return [];
-        let s = endTime.second();
-        return this.Seconds.slice(s, this.Seconds.length - 1);
-      }
-      return [];
-    },
-    disEndHours() {
-      let startTime = this.rangeValue[0];
-      if (startTime) {
-        let h = startTime.hour();
-        return this.Hours.slice(0, h);
-      }
-      return [];
-    },
-    disEndMinute(h) {
-      let startTime = this.rangeValue[0];
-      if (startTime) {
-        if (h > startTime.hour()) return [];
-        let m = startTime.minute();
-        return this.Minutes.slice(0, m);
-      }
-      return [];
-    },
-    disEndSeconds(h, m) {
-      let startTime = this.rangeValue[0];
-      if (startTime) {
-        if (h > startTime.hour()) return [];
-        if (m > startTime.minute()) return [];
-        let s = startTime.second();
-        return this.Seconds.slice(0, s);
-      }
-      return [];
-    }
-  },
-  components:{
-    [DatePicker.name]: DatePicker,
-    [DatePicker.RangePicker.name]: DatePicker.RangePicker,
-    [TimePicker.name]: TimePicker,
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.scale-time-picker {
-  .ant-calendar-ok-btn.ant-calendar-ok-btn-disabled {
-    background-color: #f5f5f5;
-    border-color: #d9d9d9;
-    color: rgba(0, 0, 0, 0.25);
-    text-shadow: none;
-    box-shadow: none;
-    &:hover {
-      background-color: #f5f5f5;
-      border-color: #d9d9d9;
-      color: rgba(0, 0, 0, 0.25);
-    }
-  }
-}
-</style>
+<template>
+  <div>
+    <!-- 日期选择器 -->
+    <template v-if="type == 'DATE'">
+      <a-date-picker
+        v-if="startToStop != 1"
+        v-model="timeValue"
+        @change="changeDate"
+        :disabled="isLock"
+      />
+      <!-- 日期选择器起止类型 -->
+      <a-range-picker v-else v-model="rangeValue" @change="changeRange" />
+    </template>
+    <template v-else-if="type == 'TIME'">
+      <!-- 时间选择器 -->
+      <a-time-picker
+        v-if="startToStop != 1"
+        v-model="timeValue"
+        @change="changeTime"
+        :disabled="isLock"
+      />
+      <!-- 时间选择器起止类型 -->
+      <slot v-if="startToStop == 1">
+        <a-time-picker
+          :disabled="isLock"
+          v-model="rangeValue[0]"
+          @change="changeRangeTime"
+          :disabledHours="disStartHours"
+          :disabledMinutes="disStartMinute"
+          :disabledSeconds="disStartSeconds"
+        />
+        -
+        <a-time-picker
+          :disabled="isLock"
+          v-model="rangeValue[1]"
+          @change="changeRangeTime"
+          :disabledHours="disEndHours"
+          :disabledMinutes="disEndMinute"
+          :disabledSeconds="disEndSeconds"
+        />
+      </slot>
+    </template>
+    <template v-else-if="type == 'DATETIME'">
+      <div v-if="dateType == 'time'">
+        <!-- 时间选择器 -->
+        <a-time-picker
+          v-if="startToStop != 1"
+          v-model="timeValue"
+          @change="changeTime"
+          :disabled="isLock"
+        />
+        <!-- 时间选择器起止类型 -->
+        <slot v-if="startToStop == 1">
+          <a-time-picker
+            :disabled="isLock"
+            v-model="rangeValue[0]"
+            @change="changeRangeTime"
+            :disabledHours="disStartHours"
+            :disabledMinutes="disStartMinute"
+            :disabledSeconds="disStartSeconds"
+          />
+          -
+          <a-time-picker
+            :disabled="isLock"
+            v-model="rangeValue[1]"
+            @change="changeRangeTime"
+            :disabledHours="disEndHours"
+            :disabledMinutes="disEndMinute"
+            :disabledSeconds="disEndSeconds"
+          />
+        </slot>
+      </div>
+      <div v-else>
+        <a-date-picker
+          v-if="startToStop != 1"
+          v-model="timeValue"
+          @change="changeDate"
+          :disabled="isLock"
+          :show-time="dateType == 'datetime'"
+          :showToday="false"
+          dropdownClassName="scale-time-picker"
+        />
+        <!-- 日期选择器起止类型 -->
+        <a-range-picker
+          v-else
+          v-model="rangeValue"
+          @change="changeRange"
+          :show-time="dateType == 'datetime'"
+          :placeholder="rangePlaceholder"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { DatePicker, TimePicker } from "ant-design-vue";
+import utils from "@/utils/utils-map";
+export default {
+  props: {
+    value: { type: [String, Array, Object] },
+    type: { default: "DATE" },
+    startToStop: { type: [String, Number] },
+    dateType: { type: String, default: "date" },
+    options: { type: Array, default: () => [] },
+    isLock: { type: Boolean, default: false }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      deep: true,
+      handler(value) {
+        if (value) {
+          this.defaultValue(value);
+        }
+      }
+    }
+  },
+  computed: {
+    rangePlaceholder() {
+      return this.dateType === "datetime" ? ["开始时间", "结束时间"] : ["开始日期", "结束日期"];
+    }
+  },
+  data() {
+    return {
+      dateFormat: "YYYY-MM-DD",
+      timeFormat: "HH:mm:ss",
+      timeValue: null,
+      rangeValue: [],
+      Hours: Array.from(Array(24), (v, k) => k),
+      Minutes: Array.from(Array(60), (v, k) => k),
+      Seconds: Array.from(Array(60), (v, k) => k)
+    };
+  },
+  created() {
+    this.handleFormat();
+  },
+  methods: {
+    handleFormat() {
+      if (this.dateType == "datetime") {
+        this.dateFormat = "YYYY-MM-DD HH:mm:ss";
+      }
+    },
+    defaultValue(value) {
+      this.handleFormat();
+      let { type, startToStop, dateFormat, timeFormat } = this;
+      let tempValue = value;
+      if (utils.isJSON(value)) {
+        tempValue = JSON.parse(value);
+      }
+      const result = JSON.parse(JSON.stringify(tempValue));
+      if (utils.isEmpty(result)) {
+        return result;
+      } else {
+        if (type == "TIME" || this.dateType == "time") {
+          if (startToStop == 1) {
+            this.rangeValue = [
+              result[0] ? moment(result[0], timeFormat) : null,
+              result[1] ? moment(result[1], timeFormat) : null
+            ];
+            return;
+          } else {
+            this.timeValue = moment(result, timeFormat);
+            return;
+          }
+        } else {
+          if (startToStop == 1) {
+            this.rangeValue = [
+              moment(result[0], dateFormat),
+              moment(result[1], dateFormat)
+            ];
+            return;
+          } else {
+            this.timeValue = moment(result, dateFormat);
+            return;
+          }
+        }
+      }
+    },
+    changeDate(v) {
+      let data = v ? moment(v).format(this.dateFormat) : "";
+      this.$emit("change", data);
+    },
+    changeRange(v) {
+      this.$emit(
+        "change",
+        v.map(item => moment(item).format(this.dateFormat))
+      );
+    },
+    changeTime(v) {
+      let data = v ? moment(v).format(this.timeFormat) : "";
+      this.$emit("change", data);
+    },
+    changeRangeTime() {
+      this.$emit(
+        "change",
+        this.rangeValue.map(item => {
+          if (item) {
+            return moment(item).format(this.timeFormat);
+          } else {
+            return "";
+          }
+        })
+      );
+    },
+    disStartHours() {
+      let endTime = this.rangeValue[1];
+      if (endTime) {
+        let h = endTime.hour();
+        return this.Hours.slice(h, this.Hours.length - 1);
+      }
+      return [];
+    },
+    disStartMinute(h) {
+      let endTime = this.rangeValue[1];
+      if (endTime) {
+        if (h < endTime.hour()) return [];
+        let m = endTime.minute();
+        return this.Minutes.slice(m, this.Minutes.length - 1);
+      }
+      return [];
+    },
+    disStartSeconds(h, m) {
+      let endTime = this.rangeValue[1];
+      if (endTime) {
+        if (h < endTime.hour()) return [];
+        if (m < endTime.minute()) return [];
+        let s = endTime.second();
+        return this.Seconds.slice(s, this.Seconds.length - 1);
+      }
+      return [];
+    },
+    disEndHours() {
+      let startTime = this.rangeValue[0];
+      if (startTime) {
+        let h = startTime.hour();
+        return this.Hours.slice(0, h);
+      }
+      return [];
+    },
+    disEndMinute(h) {
+      let startTime = this.rangeValue[0];
+      if (startTime) {
+        if (h > startTime.hour()) return [];
+        let m = startTime.minute();
+        return this.Minutes.slice(0, m);
+      }
+      return [];
+    },
+    disEndSeconds(h, m) {
+      let startTime = this.rangeValue[0];
+      if (startTime) {
+        if (h > startTime.hour()) return [];
+        if (m > startTime.minute()) return [];
+        let s = startTime.second();
+        return this.Seconds.slice(0, s);
+      }
+      return [];
+    }
+  },
+  components:{
+    [DatePicker.name]: DatePicker,
+    [DatePicker.RangePicker.name]: DatePicker.RangePicker,
+    [TimePicker.name]: TimePicker,
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.scale-time-picker {
+  .ant-calendar-ok-btn.ant-calendar-ok-btn-disabled {
+    background-color: #f5f5f5;
+    border-color: #d9d9d9;
+    color: rgba(0, 0, 0, 0.25);
+    text-shadow: none;
+    box-shadow: none;
+    &:hover {
+      background-color: #f5f5f5;
+      border-color: #d9d9d9;
+      color: rgba(0, 0, 0, 0.25);
+    }
+  }
+}
+</style>