eoss-mobiles 0.4.0 → 0.4.2

package/packages/date/src/main.vue

@@ -1,401 +1,401 @@
-<template>
-  <div class="em-date">
-    <em-input
-      readonly
-      clickable
-      v-bind="$attrs"
-      :label="label"
-      :value="pickerValue || ''"
-      :label-align="labelAlign"
-      :input-align="inputAlign"
-      :label-width="labelWidth"
-      :center="center"
-      :required="required"
-      :hideLabel="hideLabel"
-      :placeholder="
-        (disabled || readonly) && placeholder == undefined ? '暂无数据' : placeholder != undefined ? placeholder : `请选择${label}`
-      "
-      @click="handlePicker"
-    >
-      <template slot="input">
-        <span
-          v-if="pickerValue"
-          :style="`color:${disabled || readonly ? '#c8c9cc' : ''}`"
-          >{{ pickerValue}} </span
-        >
-        <span style="color:#c8c9cc" v-else>{{
-          (disabled || readonly) && placeholder == undefined ? '暂无数据' : placeholder != undefined ? placeholder : `请选择${label}`
-        }}</span>
-      </template>
-      <template slot="right-icon" v-if="clearable">
-        <span @click.stop="handleClear"
-          ><van-icon name="clear" color="#C8C9CC"
-        /></span>
-      </template>
-    </em-input>
-    <van-popup
-      v-model="showPicker"
-      v-on="$listeners"
-      round
-      @close="onCancel"
-      position="bottom"
-    >
-      <EmDateTime
-        v-if="type == 'datetimeSecond'"
-        :values="value"
-        :joinStr="joinStr"
-        :title="label"
-        :min-date="$attrs['min-date']"
-        :max-date="$attrs['max-date']"
-        @confirm="onConfirm"
-        @cancel="() => (showPicker = false)"
-      />
-      <EmDatePicker
-        v-else
-        show-toolbar
-        :model="newValue"
-        :loading="newLoading"
-        :type="type"
-        :timePeriod="timePeriod"
-        :timePeriodValue="timePeriodValue"
-        v-bind="$attrs"
-        @cancel="onCancel"
-        @confirm="onConfirm"
-        @change="onChange"
-      >
-        <template v-for="(index, name) in $slots" :slot="name">
-          <slot :name="name" />
-        </template>
-      </EmDatePicker>
-    </van-popup>
-  </div>
-</template>
-
-<script>
-import EmDateTime from './date-time.vue';
-import EmDatePicker from './date-picker.vue';
-export default {
-  name: 'EmDate',
-  components: { EmDateTime, EmDatePicker },
-  inheritAttrs: false,
-  data() {
-    return {
-      showPicker: false,
-      newLoading: false,
-      changeValue: true,
-      firstShow: true,
-      newValueKey: '',
-      newValue: '',
-      lastValue: '',
-      dateValues: '',
-      newColumns: [],
-      newDefaultIndex: 0,
-      isOnConfirm: false,
-      count: 0,
-      pickerValue: '',
-      timeText: '',
-      timePeriodText: ''
-    };
-  },
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    hideLabel: {
-      type: Boolean,
-      default: false
-    },
-    // 绑定值
-    value: {
-      type: [String, Array, Object, Date, Number, Boolean],
-      default: ''
-    },
-    // 展示标题
-    label: {
-      type: String,
-      default: '日期选择'
-    },
-    // 输入框占位提示文字
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    // 多级选择展示拼接字符
-    joinStr: {
-      type: String,
-      default: undefined
-    },
-
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    //左侧文本宽度
-    labelWidth: {
-      type: String
-    },
-    // 左侧文本对齐方式
-    labelAlign: {
-      type: String
-    },
-    // 右侧内容对齐方式
-    inputAlign: {
-      type: String
-    },
-    // 是否使内容垂直居中
-    center: {
-      type: Boolean
-    },
-    type: {
-      type: String,
-      default: 'datetime'
-    },
-    clearable: {
-      type: Boolean,
-      default: false
-    },
-    timePeriod: {
-      type: Boolean,
-      default: false
-    },
-    timePeriodValue: {
-      type: [String, Number, Boolean],
-      default: 'AM'
-    }
-  },
-
-  watch: {
-    loading: {
-      handler(val) {
-        this.newLoading = val;
-      },
-      deep: true,
-      immediate: true
-    },
-    value: {
-      handler() {
-        this.changeValue && this.getValFun();
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-
-  mounted() {
-    this.$nextTick(() => {
-      this.lastValue = this.value;
-    });
-  },
-  methods: {
-    handleClear() {
-      this.pickerValue = '';
-      this.timeText = '';
-      this.lastValue = '';
-      this.$emit(
-        'input',
-        this.timePeriod && this.type === 'datehour'
-          ? this.timeText
-          : this.pickerValue
-      );
-    },
-    onChange(picker) {
-      this.$emit('change', picker);
-    },
-    getValFun(val) {
-      const _that = this;
-      if (_that.isOnConfirm) return;
-      if (!val) {
-        if (
-          (_that.value != undefined && _that.value) ||
-          (_that.value == undefined && _that.value)
-        ) {
-          _that.pickerValue = _that.getValue(_that.value);
-        } else {
-          _that.pickerValue = _that.value;
-        }
-      } else {
-        _that.pickerValue = _that.getValue(_that.val);
-      }
-
-      const { type } = _that;
-      if (type === 'time') {
-        _that.newValue = _that.value != undefined ? _that.value : _that.value;
-        return;
-      }
-      // if(_that.count == 0 || _that.value != undefined) {
-      // _that.count++
-      let date = _that.value;
-      if (typeof date == 'string') {
-        if (type != 'year') {
-          date = date.replace('年', '/');
-        } else {
-          date = date.replace(this.joinStr || '年', '');
-        }
-        if (type == 'year-month') {
-          date = date.replace('月', '');
-        } else {
-          date = date.replace('月', '/');
-        }
-        date = date.replace('日', ' ');
-        date = date.replace('时', ':');
-        date = date.replace('分', ':');
-        date = date.replace('秒', '');
-
-        // date = date.replace(/-/g, '/');
-        date = date.trim();
-      }
-      _that.isOnConfirm = false;
-      _that.newValue =
-        date != undefined && date
-          ? new Date(date || '')
-          : date == undefined && _that.value
-          ? new Date(_that.value || '')
-          : new Date();
-      // }
-    },
-    onCancel() {
-      this.$emit('input', this.lastValue);
-      this.getValFun(this.lastValue);
-      this.showPicker = false;
-    },
-    onConfirm(value, timePeriod) {
-     
-      this.showPicker = false;
-      this.timePeriodText = timePeriod;
-      this.pickerValue = this.getValue(value);
-      this.isOnConfirm = true;
-      this.lastValue = value;
-      this.changeValue = false;
-      this.$emit(
-        'input',
-        this.timePeriod && this.type === 'datehour'
-          ? this.timeText
-          : this.pickerValue
-      );
-      this.$emit('confirm', this.pickerValue.replace(/\s/g, ""), this.timePeriodText);
-    },
-    getValue(val) {
-      const { type } = this;
-      let timePeriodText = '';
-      if (this.timePeriod && (this.timePeriodText || this.timePeriodValue)) {
-        timePeriodText =
-          (this.timePeriodText || this.timePeriodValue) == 'AM'
-            ? '上午'
-            : '下午';
-      }
-      let value = '';
-      if (!this.value && !val && this.value == undefined) return;
-      if (val && typeof val == 'string') {
-        return val;
-      } else if (
-        this.value &&
-        typeof this.value == 'string' &&
-        val &&
-        typeof val == 'string'
-      ) {
-        return this.value;
-      }
-      let newValue = new Date(val || this.value);
-
-      if (typeof newValue == 'string') {
-        newValue = newValue.replace('年', '/');
-        newValue = newValue.replace('月', '/');
-        newValue = newValue.replace('日', ' ');
-        newValue = newValue.replace('时', ':');
-        newValue = newValue.replace('分', ':');
-        newValue = newValue.replace('秒', '');
-        newValue = newValue.replace(/-/g, '/');
-        newValue = newValue.trim();
-      }
-      let date = new Date(newValue);
-      let y = date.getFullYear();
-      let m =
-        date.getMonth() + 1 < 10
-          ? '0' + (date.getMonth() + 1)
-          : date.getMonth() + 1;
-      let d = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
-      let h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
-      let minute =
-        date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
-      let s =
-        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
-      if (type == 'date' && newValue != 'Invalid Date') {
-        value =
-          y +
-          (this.joinStr || '年') +
-          m +
-          (this.joinStr || '月') +
-          d +
-          (this.joinStr ? ' ' : '日 ');
-      } else if (type === 'year-month' && newValue != 'Invalid Date') {
-        value = y + (this.joinStr || '年') + m + (this.joinStr ? ' ' : '月');
-      } else if (type === 'month-day' && newValue != 'Invalid Date') {
-        value = m + (this.joinStr || '月') + d + (this.joinStr ? ' ' : '日');
-      } else if (type === 'time' && newValue.split(':').length >= 2) {
-        let time = [newValue.split(':')[0], newValue.split(':')[1]];
-        value = this.joinStr
-          ? time.join(':')
-          : time.join(':').replace(':', '时') + '分';
-      } else if (
-        (type === 'datetime' || type === 'datetimeSecond') &&
-        newValue != 'Invalid Date'
-      ) {
-        value =
-          y +
-          (this.joinStr || '年') +
-          m +
-          (this.joinStr || '月') +
-          d +
-          (this.joinStr ? ' ' : '日 ') +
-          h +
-          (this.joinStr ? ':' : '时') +
-          minute +
-          (this.joinStr ? (type === 'datetimeSecond' ? ':' : '') : '分') +
-          (type === 'datetimeSecond' ? s + (this.joinStr ? '' : '秒') : '');
-      } else if (type === 'datehour' && newValue != 'Invalid Date') {
-        value =
-          y +
-          (this.joinStr || '年') +
-          m +
-          (this.joinStr || '月') +
-          d +
-          (this.joinStr ? ' ' : '日 ') +
-          (this.timePeriod ? timePeriodText : h + (this.joinStr ? ' ' : '时'));
-        if (this.timePeriod && type === 'datehour') {
-          this.timeText =
-            y +
-            (this.joinStr || '年') +
-            m +
-            (this.joinStr || '月') +
-            d +
-            (this.joinStr ? '' : '日 ');
-        }
-      } else if (type === 'year' && newValue != 'Invalid Date') {
-        value = y + (this.joinStr ? '' : '年');
-      }
-      return value;
-    },
-
-    handlePicker() {
-      if (this.disabled || this.readonly) return;
-       if (this.firstShow) {
-        this.lastValue = this.value;
-      }
-      this.firstShow = false;
-      this.showPicker = true;
-      this.$emit('showPicker');
-    }
-  }
-};
-</script>
-
-<style></style>
+<template>
+  <div class="em-date">
+    <em-input
+      readonly
+      clickable
+      v-bind="$attrs"
+      :label="label"
+      :value="pickerValue || ''"
+      :label-align="labelAlign"
+      :input-align="inputAlign"
+      :label-width="labelWidth"
+      :center="center"
+      :required="required"
+      :hideLabel="hideLabel"
+      :placeholder="
+        (disabled || readonly) && placeholder == undefined ? '暂无数据' : placeholder != undefined ? placeholder : `请选择${label}`
+      "
+      @click="handlePicker"
+    >
+      <template slot="input">
+        <span
+          v-if="pickerValue"
+          :style="`color:${disabled || readonly ? '#c8c9cc' : ''}`"
+          >{{ pickerValue}} </span
+        >
+        <span style="color:#c8c9cc" v-else>{{
+          (disabled || readonly) && placeholder == undefined ? '暂无数据' : placeholder != undefined ? placeholder : `请选择${label}`
+        }}</span>
+      </template>
+      <template slot="right-icon" v-if="clearable">
+        <span @click.stop="handleClear"
+          ><van-icon name="clear" color="#C8C9CC"
+        /></span>
+      </template>
+    </em-input>
+    <van-popup
+      v-model="showPicker"
+      v-on="$listeners"
+      round
+      @close="onCancel"
+      position="bottom"
+    >
+      <EmDateTime
+        v-if="type == 'datetimeSecond'"
+        :values="value"
+        :joinStr="joinStr"
+        :title="label"
+        :min-date="$attrs['min-date']"
+        :max-date="$attrs['max-date']"
+        @confirm="onConfirm"
+        @cancel="() => (showPicker = false)"
+      />
+      <EmDatePicker
+        v-else
+        show-toolbar
+        :model="newValue"
+        :loading="newLoading"
+        :type="type"
+        :timePeriod="timePeriod"
+        :timePeriodValue="timePeriodValue"
+        v-bind="$attrs"
+        @cancel="onCancel"
+        @confirm="onConfirm"
+        @change="onChange"
+      >
+        <template v-for="(index, name) in $slots" :slot="name">
+          <slot :name="name" />
+        </template>
+      </EmDatePicker>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import EmDateTime from './date-time.vue';
+import EmDatePicker from './date-picker.vue';
+export default {
+  name: 'EmDate',
+  components: { EmDateTime, EmDatePicker },
+  inheritAttrs: false,
+  data() {
+    return {
+      showPicker: false,
+      newLoading: false,
+      changeValue: true,
+      firstShow: true,
+      newValueKey: '',
+      newValue: '',
+      lastValue: '',
+      dateValues: '',
+      newColumns: [],
+      newDefaultIndex: 0,
+      isOnConfirm: false,
+      count: 0,
+      pickerValue: '',
+      timeText: '',
+      timePeriodText: ''
+    };
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    hideLabel: {
+      type: Boolean,
+      default: false
+    },
+    // 绑定值
+    value: {
+      type: [String, Array, Object, Date, Number, Boolean],
+      default: ''
+    },
+    // 展示标题
+    label: {
+      type: String,
+      default: '日期选择'
+    },
+    // 输入框占位提示文字
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    // 多级选择展示拼接字符
+    joinStr: {
+      type: String,
+      default: undefined
+    },
+
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    //左侧文本宽度
+    labelWidth: {
+      type: String
+    },
+    // 左侧文本对齐方式
+    labelAlign: {
+      type: String
+    },
+    // 右侧内容对齐方式
+    inputAlign: {
+      type: String
+    },
+    // 是否使内容垂直居中
+    center: {
+      type: Boolean
+    },
+    type: {
+      type: String,
+      default: 'datetime'
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    timePeriod: {
+      type: Boolean,
+      default: false
+    },
+    timePeriodValue: {
+      type: [String, Number, Boolean],
+      default: 'AM'
+    }
+  },
+
+  watch: {
+    loading: {
+      handler(val) {
+        this.newLoading = val;
+      },
+      deep: true,
+      immediate: true
+    },
+    value: {
+      handler() {
+        this.changeValue && this.getValFun();
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.lastValue = this.value;
+    });
+  },
+  methods: {
+    handleClear() {
+      this.pickerValue = '';
+      this.timeText = '';
+      this.lastValue = '';
+      this.$emit(
+        'input',
+        this.timePeriod && this.type === 'datehour'
+          ? this.timeText
+          : this.pickerValue
+      );
+    },
+    onChange(picker) {
+      this.$emit('change', picker);
+    },
+    getValFun(val) {
+      const _that = this;
+      if (_that.isOnConfirm) return;
+      if (!val) {
+        if (
+          (_that.value != undefined && _that.value) ||
+          (_that.value == undefined && _that.value)
+        ) {
+          _that.pickerValue = _that.getValue(_that.value);
+        } else {
+          _that.pickerValue = _that.value;
+        }
+      } else {
+        _that.pickerValue = _that.getValue(_that.val);
+      }
+
+      const { type } = _that;
+      if (type === 'time') {
+        _that.newValue = _that.value != undefined ? _that.value : _that.value;
+        return;
+      }
+      // if(_that.count == 0 || _that.value != undefined) {
+      // _that.count++
+      let date = _that.value;
+      if (typeof date == 'string') {
+        if (type != 'year') {
+          date = date.replace('年', '/');
+        } else {
+          date = date.replace(this.joinStr || '年', '');
+        }
+        if (type == 'year-month') {
+          date = date.replace('月', '');
+        } else {
+          date = date.replace('月', '/');
+        }
+        date = date.replace('日', ' ');
+        date = date.replace('时', ':');
+        date = date.replace('分', ':');
+        date = date.replace('秒', '');
+
+        // date = date.replace(/-/g, '/');
+        date = date.trim();
+      }
+      _that.isOnConfirm = false;
+      _that.newValue =
+        date != undefined && date
+          ? new Date(date || '')
+          : date == undefined && _that.value
+          ? new Date(_that.value || '')
+          : new Date();
+      // }
+    },
+    onCancel() {
+      this.$emit('input', this.lastValue);
+      this.getValFun(this.lastValue);
+      this.showPicker = false;
+    },
+    onConfirm(value, timePeriod) {
+     
+      this.showPicker = false;
+      this.timePeriodText = timePeriod;
+      this.pickerValue = this.getValue(value);
+      this.isOnConfirm = true;
+      this.lastValue = value;
+      this.changeValue = false;
+      this.$emit(
+        'input',
+        this.timePeriod && this.type === 'datehour'
+          ? this.timeText
+          : this.pickerValue
+      );
+      this.$emit('confirm', this.pickerValue.replace(/\s/g, ""), this.timePeriodText);
+    },
+    getValue(val) {
+      const { type } = this;
+      let timePeriodText = '';
+      if (this.timePeriod && (this.timePeriodText || this.timePeriodValue)) {
+        timePeriodText =
+          (this.timePeriodText || this.timePeriodValue) == 'AM'
+            ? '上午'
+            : '下午';
+      }
+      let value = '';
+      if (!this.value && !val && this.value == undefined) return;
+      if (val && typeof val == 'string') {
+        return val;
+      } else if (
+        this.value &&
+        typeof this.value == 'string' &&
+        val &&
+        typeof val == 'string'
+      ) {
+        return this.value;
+      }
+      let newValue = new Date(val || this.value);
+
+      if (typeof newValue == 'string') {
+        newValue = newValue.replace('年', '/');
+        newValue = newValue.replace('月', '/');
+        newValue = newValue.replace('日', ' ');
+        newValue = newValue.replace('时', ':');
+        newValue = newValue.replace('分', ':');
+        newValue = newValue.replace('秒', '');
+        newValue = newValue.replace(/-/g, '/');
+        newValue = newValue.trim();
+      }
+      let date = new Date(newValue);
+      let y = date.getFullYear();
+      let m =
+        date.getMonth() + 1 < 10
+          ? '0' + (date.getMonth() + 1)
+          : date.getMonth() + 1;
+      let d = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+      let h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+      let minute =
+        date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+      let s =
+        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+      if (type == 'date' && newValue != 'Invalid Date') {
+        value =
+          y +
+          (this.joinStr || '年') +
+          m +
+          (this.joinStr || '月') +
+          d +
+          (this.joinStr ? ' ' : '日 ');
+      } else if (type === 'year-month' && newValue != 'Invalid Date') {
+        value = y + (this.joinStr || '年') + m + (this.joinStr ? ' ' : '月');
+      } else if (type === 'month-day' && newValue != 'Invalid Date') {
+        value = m + (this.joinStr || '月') + d + (this.joinStr ? ' ' : '日');
+      } else if (type === 'time' && newValue.split(':').length >= 2) {
+        let time = [newValue.split(':')[0], newValue.split(':')[1]];
+        value = this.joinStr
+          ? time.join(':')
+          : time.join(':').replace(':', '时') + '分';
+      } else if (
+        (type === 'datetime' || type === 'datetimeSecond') &&
+        newValue != 'Invalid Date'
+      ) {
+        value =
+          y +
+          (this.joinStr || '年') +
+          m +
+          (this.joinStr || '月') +
+          d +
+          (this.joinStr ? ' ' : '日 ') +
+          h +
+          (this.joinStr ? ':' : '时') +
+          minute +
+          (this.joinStr ? (type === 'datetimeSecond' ? ':' : '') : '分') +
+          (type === 'datetimeSecond' ? s + (this.joinStr ? '' : '秒') : '');
+      } else if (type === 'datehour' && newValue != 'Invalid Date') {
+        value =
+          y +
+          (this.joinStr || '年') +
+          m +
+          (this.joinStr || '月') +
+          d +
+          (this.joinStr ? ' ' : '日 ') +
+          (this.timePeriod ? timePeriodText : h + (this.joinStr ? ' ' : '时'));
+        if (this.timePeriod && type === 'datehour') {
+          this.timeText =
+            y +
+            (this.joinStr || '年') +
+            m +
+            (this.joinStr || '月') +
+            d +
+            (this.joinStr ? '' : '日 ');
+        }
+      } else if (type === 'year' && newValue != 'Invalid Date') {
+        value = y + (this.joinStr ? '' : '年');
+      }
+      return value;
+    },
+
+    handlePicker() {
+      if (this.disabled || this.readonly) return;
+       if (this.firstShow) {
+        this.lastValue = this.value;
+      }
+      this.firstShow = false;
+      this.showPicker = true;
+      this.$emit('showPicker');
+    }
+  }
+};
+</script>
+
+<style></style>